prevProps 和 current props 在 componentDidUpdate 中是一样的答案

【问题标题】：prevProps and current props are the same in componentDidUpdateprevProps 和 current props 在 componentDidUpdate 中是一样的
【发布时间】：2021-07-01 22:19:32
【问题描述】：

像这里的许多其他帖子一样，我在 componentDidUpdate 函数中获得了相同的道具。这是相关代码。

Child

componentDidUpdate(prevProps, prevState) {
    if (prevProps.data !== this.props.data) {
      console.log('Next up mounted')
    }
}

Parent

static async getInitialProps({ query }) {
   const props = axios
      .post('http://localhost:3000/api/club', { clubId: query.clubid })
      .then((res) => {
         //...Do stuff here
         return {
             ...
             data: res.data.payload,
             ...
         }

updatePbd(newBet) {
    let newPbd = [newBet[0]].concat(this.state.clubBetsPending)
    let allBets = this.state.clubBetsResulted.concat(newPbd)
    this.setState({ data: allBets })
}

render() {
    return (<>
        {this.state.data && (
        <NextUp
            data={this.state.data}
        />
        )}
    </>)
}

所以理论上，当我调用 updatePbd 并将其传递给单个数组元素时，它应该被附加到数组并更新导致子组件运行控制台日志的状态。首先，它甚至在第一次加载时也不会运行，所以它不应该总是从 prevProps = null 然后 props = something 开始吗？无论如何，在函数运行时 prevProps 和当前 .props 是相同的。谢谢

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

在这种情况下，初始 prevProps 在首次加载时不应为空。

签出getInitialProps next.js docs

getInitialProps 在页面中启用服务器端呈现，并允许您进行初始数据填充，这意味着发送带有数据的页面已经从服务器填充。这对 SEO 尤其有用。

此外，考虑到您的状态是一个数组，使用严格相等 (===) 对其进行检查，这意味着您的检查可能始终为真。您可能需要检查数组的深度相等性检查，以防万一它们都具有相同的值。这是一个很好的问题，有很多关于比较数组的好答案

How to compare arrays in Javascript

【讨论】：