反应原生的增量值

Posted 2023-01-11

我从有效载荷中获取数据，每个帖子上都有喜欢的总数。在用户屏幕上，有一个用户喜欢帖子的图标，我想要实现的是当用户点击它时，显示的值会增加到加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

答案

您正在将状态变量存储在状态变量中，因此请使用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)
  ))

更新：在更新计数值之前进行检查并更改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;
    )
  ))

注意：我假设每个帖子都有一个密钥id唯一值，如果它不存在则使用每个帖子的任何其他独特属性。

另一答案

如果数组序列不是问题，您可以使用项索引并使用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)