React天然中的增量值

Question

我正在从有效载荷中获取数据，该有效载荷在每个帖子上都有喜欢的总数。在用户屏幕上，有一个图标可以让用户喜欢帖子，而我想实现的目标是，当用户点击时，值显示的值将增加到加上1 plus 1。

查看：

{
  posts.map((item, i) => {
    return (
      <View key={i} style={styles.user}>
        <Card>
          <ListItem
            titleStyle={{ color: '#36c', fontWeight:'500' }}
            titleNumberOfLines={2}
            hideChevron={false}
            roundAvatar
            title={item.headline}
            avatar={{uri:'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg'}}
          />
          <Text style={{marginBottom: 10, fontSize:16, color:'#4a4a4a', fontFamily:'HelveticaNeue-Light'}}>
            {item.text}
          </Text>
          <TouchableOpacity style={styles.likeContainer}>
            <Text style={{fontSize:14}}>{item.likesCount}{"n"}</Text>
            <Icon
              onPress={()=>onLikePost(item)}
              name='md-thumbs-up'
              type='ionicon'
              iconStyle={[(item.isLiked=== true) ? styles.likedColor : styles.unLikedColor]}
            />
          </TouchableOpacity>
        </Card>
      </View>
    );
  })
}

容器：

state = {
  posts : [],
  id: '',
  user: ''
}
componentDidMount = () => {
  const { navigation } = this.props;
  this.setState({
    id : navigation.getParam('id'), 
    user: navigation.getParam('user')
  }, ()=> this.getData())
}
getData = () => {
  const api = create({
    baseURL: 'https://url.com/api',
    headers: {'Accept': 'application/json'}
  });
  api.get('/groups/'+`${this.state.groupID}`+'/posts').then((response) => {
    let data = response.data.data
    this.setState({ posts: data });
    console.log(JSON.stringify(this.state.posts))
  })
}
onLikePost = (item) => {
  item.likeCount = item.likeCount+1
}

Answer 1

您将帖子数据存储在状态变量中，因此请使用setState对其进行更新。使用map并检查每个帖子，每当ID（每个帖子的唯一属性）匹配到单击项目的ID时，请增加其LikesCount，否则返回相同的数据。

这样写：

onLikePost = (item) => {
  this.setState(prevState => ({
    posts: prevState.posts.map(el => el.id === item.id? {...el, likesCount: el.likesCount+1} : el)
  }))
}

UPDATE ：将支票放在更新计数值之前，然后更改ISLIKED bool。

onLikePost = (item) => {
  this.setState(prevState => ({
    posts: prevState.posts.map(el => {
      if(el.id === item.id) {
        return {
          ...el,
          isLiked: !el.isLiked,
          likesCount: !el.isLiked? el.likesCount+1 : el.likesCount-1,
        }
      }
      return el;
    })
  }))
}

note ：我假设每个帖子都有一个键id唯一值，如果不存在，请使用每个帖子的任何其他唯一属性。

Answer 2

如果数组序列不是问题，则可以使用项目索引并使用setState进行更新。

<Icon
  onPress={()=>onLikePost(i)}
  ...
/>
...
onLikePost = (i) => {
  let posts = this.state.posts;
  posts[i].likesCount = !posts[i].isLiked ? posts[i].likesCount + 1 : posts[i].likesCount - 1;
  posts[i].isLiked = !posts[i].isLiked;
  this.setState({ posts: posts}) 
}