如何更新传递给函数的项目？

Question

我正在尝试通过添加 + 1 来更新项目，而不让 fetch 更新项目。基本上，当我fetch 时，后端将数字更新为 + 1，而不是那样做，我想通过前端来做。

<TouchableOpacity
  onPress={() => this.anim_like(item)} <-- Passing all items from dataSource
  style={{position:'absolute',  height: '100%', width: '100%', right: 140, bottom: 50}}
>
  <Animation
    progress={item.progress}
    source={require('../Animations/favourite_app_icon.json')}
    style={{ height: '100%', width: '100%', position: 'absolute'}}
    resizeMode={`contain`}
   />
</TouchableOpacity>
<Text>{item.likes}</Text> <-- Getting likes from the fetched data




anim_like = (item) => {
  Animated.timing(item.progress, {
    toValue: 1,
    duration: 1500,
    easing: Easing.linear,
  }).start();
  fetch(`https://www.example.com/React/user-like.php`, {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      post_id : item.id,
    })  
  }).then((response) => response.json())
    .then((responseJson) => {
      //this.refetchData(); <-- Current way to update item.likes
      item.likes = item.likes + 1;<-- Want to update it this way by + 1 without updating the full fetch data
    }).catch((error) => {   
  });
}

当然，anim_like 一旦点击，就会在后端添加 + 1。我目前拥有的方式是，一旦它在后端更新，重新获取结果并显示它。这会导致响应时间变慢。

这里是获取 api：

fetch(`https://www.example.com/React/user.php` , {
   method: 'POST',
   headers: {
     'Accept': 'application/json',
     'Content-Type': 'application/json',
   }

  })
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        user_image:  responseJson[0].user_images.map(item => ({ ...item, progress: new Animated.Value(0)})) <-- This adds a unique animated.value to each user 
        },function() {

        });
    })
    .catch((error) => {
      //console.error(error);
    });

我使用this.state.user_image 从后端检索所有现有数据并将其放入renderItem 中的Flatlist。我显示我想要的数据，例如上面的代码，item.likes 或item.progress。

它还负责将其转换为 JSON 数组并使用 React Native 中的数据：

[{
  "food":"pizza",
  "who":"Person",
  "user_images":[{
    "id":"114",
    "username":"Hannah_L123",
    "images":"resized_1522-20131219-creativity.jpg",
    "date":"12\/04\/2017",
    "likes": "20"
  }]
}]

如果其中有任何令人困惑的地方，我很乐意为它提供一些启示！谢谢！

Answer 1

我相信您想在不更新服务器的情况下更新喜欢。

您可以通过以下方式实现：

在你的类中创建一个状态。

constructor(props){
    super(props)
    this.state = {
        animLike: ''
    }
}

将事件更改为：

onPress={this.updateApi}

原来是这样。

<TouchableOpacity
    onPress={this.updateApi} //<-- Passing like to
    style={{position:'absolute',  height: '100%', width: '100%', right: 140, bottom: 50}}>
        <Animation
            progress={item.progress}
            source={require('../Animations/favourite_app_icon.json')}
            style={{ height: '100%', width: '100%', position: 'absolute'}}
            resizeMode={`contain`}
        />
</TouchableOpacity>
<Text>{this.state.animLike}</Text> // <--Getting likes from state

在你的类中添加一个函数来更新前端和后端

updateApi = () =>{
    this.setState({animLike:+1})
    this.anim_like(this.state.animLike)
}

Answer 2

如果item 处于您的状态，您可以像这样更新它

//where you do item.likes = item.likes +1  you Must do
this.setState(prevState => ({
    item: {
        ...prevState.item,
        likes: prevState.item.likes + 1
    }
}));

如果它在像ˋthis.state.itemspassed rendered byrenderItem`这样的数组中，那么你可以

//where you call anim_like you have to pass the index of the item like
this.anim_like(item, index)

//in your anim_like function where you do item.likes = item.likes + 1 you must do
let items = this.state.items; // to take the items and manipulate it
item.likes = item.likes + 1; //update likes for the current item
items[index] = item; // update the item in the array with the index passed in parameter of anim_like
this.setState({
    items
}); // update the state to have your screen refresh 

但我建议为具有适当方法的项目使用专用组件，例如 anim_like，因为这样它会重新渲染所有屏幕，而不仅仅是喜欢的组件。

在你的情况下，我认为this.state.items 是this.state.user_image