异步获取后将颜色更改为图标

Question

我有一个 TouchableHighlight 的矢量图标。当按下 TouchableHighlight 时，应用程序将从 API 中获取内容。解析结果后，将结果保存在一个state中，state名为favorited，是一个boolean数组，图标是否被按下保存。

我的想法是将 ID 收藏与否保存到一个名为 "favorited" 的布尔数组中。所以颜色的状态是this.state.favorited[id]。以这种方式设置颜色可能是个坏主意，希望你能给我更好的主意:)

vector-icon中的颜色参数为

<Ionicons.Button 
    name="ios-star" 
    color={ (this.state.favorited[post.id]) ? 'white' : 'black' }
    backgroundColor="transparent"
    underlayColor="transparent"
    onPress={()=> {
        vote = this.favPost(post);
        } 
    }
/>

所以我的尝试是当图标被按下时，将数据发送到一个API并在获取的异步响应中，然后更新状态this.state.favorited[data.id]

favPost 函数更新状态 'favorited'： val 为真或假

favPost(data){
    fetch(..blabla..).
    then(response.json()).
    then({
        ...
        var favorited = this.state.favorited;
        favorited[post.id] = val;
        this.setState({'favorited' : favorited});
        ...
    })
}

所以我不知道该怎么做。也许我无法使用 (bool) ? : 表达式分配颜色。

react-native --版本:

react-native-cli: 2.0.1
react-native: 0.43.3

npm 列表 --depth=0 | grep vector-icon

├── react-native-vector-icons@4.1.1

Answer 1

您的方向是正确的，但您的代码中存在一些错误。

1º 你不能改变状态 directly

var favorited = this.state.favorited;
favorited[post.id] = val; // This is wrong

假设您将收藏的 id 存储在这样的状态中

state = {
    favorited : [] // [1,2,3, etc]
}

你应该像这样更新你的状态

favPost(data){
    fetch(..blabla..).
    then(response.json()).
    then({
        ...
        this.setState({favorited: [...this.state.favorited, post.id]});
        ...
    })
}

2º 你用来检查按钮是否被点击的条件应该是这样的

color={this.state.favorited.find(v => v === post.id) ? 'white' : 'black' }

Here's a working example 您想要达到的目标。

（您只需删除模式并单击 "Tap to play"）。

异步获取后将颜色更改为图标

Change color to icon after asynchronous fetch

javascript

reactjs

react-native

states