React在我的React应用程序上实现shouldComponentUpdate并具有

Question

我在React应用程序上使用loadingData状态实现ShouldComponentUpdate时遇到了困难。当nextProps没有从this.props更改时，我想防止组件再次加载，它工作得很好，但它搞乱了loadingdata值，我找不到原因。

  constructor(props){
    super(props)
    this.state = {
      loadingData: false,
    }
  }

  async componentDidMount() {
    this._isMounted = true;
    const { username } = this.state
    this.setState({ loadingData: true })

    try {
      await this.props.getUserData(username)
      this.setState({ loadingData: false })
    } catch (err) {
      console.log(err)
      this.setState({ loadingData: false })
    }
  }

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

render() {
  return(
    <div>{this.state.loadingData ? "Loading..." : this.props.userData}</div>
  )
}

Answer 1

这将始终返回false，因为在每个呈现之间This.props与nextprops是不同的对象。

举一个最简单的例子：

console.log({} === {}) // false