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.items passed rendered by renderItem`之类的数组中，则可以

//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

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

2 个答案: