nextProps 始终与 componentWillReceiveProps 中的 this.props 相同，即使 props 已更改

Posted 2023-02-23

【中文标题】nextProps 始终与 componentWillReceiveProps 中的 this.props 相同，即使 props 已更改

【英文标题】：nextProps always identical to this.props in componentWillReceiveProps, even when the props have changed

【发布时间】：2016-08-20 19:03:24

【问题描述】：

我的 React 应用程序中有一个组件可以为用户呈现总价值。当该值上升时，我想播放噪音。我认为在显示总数的组件中将是一个播放噪音的好地方。

所以我在组件中添加了一个componentWillReceiveProps 方法，并在其中计算了两个总数：total 由this.props 计算得出，nextTotal 由nextProps 计算得出。

令我惊讶的是，即使值发生变化并且总数发生变化，nextTotal 和 total总是相同。所以当总数上升时我想解雇的条件永远不会发生。

我编写了一个简单的单组件示例。 JSfiddle.

var Hello = React.createClass(
  componentWillReceiveProps: function(nextProps) 
    var total = 0;
    this.props.vals.forEach(val => total+= val);

    var nextTotal = 0;
    nextProps.vals.forEach(val => nextTotal+= val);

        console.log(total, nextTotal)

    if (nextTotal > total) 
            //never runs
            console.log('moving up');
        
  ,
  render: function() 
    var total = 0;
    vals.forEach(val => total+= val)
    return (
        <div>total</div>
    )
  
);

var vals = [1, 21, 452, 123];

setInterval(renderReact, 1000)

function renderReact() 
    vals.push(10);
  ReactDOM.render(
    <Hello
      vals=vals
    />,
    document.getElementById('container')
  );

如您所见，它每秒钟将 10 加到 vals 数组中，这意味着总数增加 1。但是如果您打开控制台，您可以看到 total 和 nextTotal 始终是同样，moving up 永远不会被记录。

我显然误解了某事，如果有人能解释我的误解是什么，以及我应该如何实现我的目标，那就太棒了。

【问题讨论】：

为什么不尝试记录这两个数组呢？检查一下，您一直向他们俩推十个...jsfiddle.net/ydaso4cs/2这是同一件事...

您将数组直接传递给元素。 this.props.vals 和 nextProps.vals 引用同一个对象。

您不仅引用了同一个数组，而且您的组件没有更新，因为您调用了一次渲染。我没有看到任何导致更新的代码。

@JohnRuddell 有一个 setInterval 每秒调用一次 renderReact

或许阅读本文会有所帮助：facebook.github.io/react/blog/2016/01/08/…

【参考方案1】：

正如 cmets 中所述（@PitaJ），您的问题是您第一次传入数组，然后更改数组 - 而不是使用新属性调用。您已经访问了组件作为其现有属性持有引用的对象并更改了它的内容。

在你的小提琴中，试试这个：

function renderReact() 
    vals.push(10);
  ReactDOM.render(
    <Hello
      vals=vals.concat([])
    />,
    document.getElementById('container')
  );

每次将数组的副本作为道具传递，您会发现它们有适当的不同。

这实际上是使用 react 的一个重要错误来源，如果没有仔细编写 reducer，即使在使用 redux 时也会出现这种错误。使用不可变数据结构是避免这种情况的一种方法。