Question

在我开始使用shouldComponentUpdate之前，我曾使用this.forceUpdate()，但这根本不起作用。因此，我调查了shouldComponentUpdate，发现它可以重新渲染状态（如果已更改）。就我而言，状态改变后，我需要更新数字和动画。这是我的代码：

    shouldComponentUpdate(nextProps, nextState){
  return nextState.user_image != this.state.user_image
}

这个问题是，当我使用它时，整个屏幕变成白色。在页面加载之前。

user_image包含一组来自mysql数据库的数据，我有一列称为points。

    componentDidUpdate(prevProps, prevState) {
      if (!prevState.dataSource) {

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

          })
            .then((response) => response.json())
            .then((responseJson) => {
              this.setState({
                isLoading: false,
                user_image:  responseJson[0].user_images.map(item => ({ ...item, progress: new Animated.Value(0), unprogress: new Animated.Value(1) }))
                },function() {


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

}

我之所以拥有componentDidUpdate的原因是因为this.state.log需要重新渲染一次才能包含其中的内容。但是，使用此方法不会使user_image的数量和动画更新一次，请单击动画。注意：如果我不带参数使用componentDidUpdate，则会发生2种情况。 1）应用程序的性能下降了很多，因为它不断重新渲染。2）当我转到动画时，它实际上会更新编号和动画。（我在寻找什么！）

以下是动画：

    /* Shows the starting point of the animation and is ready to use */
    anim_star = (item) => {
            //console.log(item.id);
            Animated.timing(item.progress, {
              toValue: 1,
              duration: 2000,
              easing: Easing.linear,
    }).start();
    fetch(`https://www.example.com/React/star.php`, {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      post_id : item.id,

    })

    }).then((response) => response.json())
        .then((responseJson) => {


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

  }

  /* Shows a finished animation and is ready to restart it */
  anim_unstar = (item) => {
            //console.log(item.id);
            Animated.timing(item.unprogress, {
              toValue: 1,
              duration: 2000,
              easing: Easing.linear,
    }).reset();
    fetch(`https://www.example.co/React/unstar.php`, {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      post_id : item.id,

    })

    }).then((response) => response.json())
        .then((responseJson) => {

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

  }

最后，这是其余的代码：

<-- Animations need to change once the state has changed -->
    {this.state.id.includes(item.id)  ?
  <TouchableOpacity
          onPress={() => this.anim_unstar(item)}>
           <Animation
           progress={item.unprogress}
           source={require('../Animations/favourite_app_icon.json')}
           />
           </TouchableOpacity>
         :
         <TouchableOpacity
         onPress={() => this.anim_star(item)}>
          <Animation
          progress={item.progress}
          source={require('../Animations/favourite_app_icon.json')}
          />
          </TouchableOpacity>
        }


         <Text>{item.points}</Text> <-- This needs to update when state is changed

如何获取这些更新？

在屏幕加载之前，shouldComponentUpdate（）会导致白屏

0 个答案: