Question

对于Reactjs来说是新手，所以我试图了解我所缺少的概念。

我有一个值数组，比如[1,1,1,2,2,2,3,3,3]，我想将它处理为：＆＃34; 1 ... 2 .. .3 ...＆＃34;，但我不知道如何跟踪呈现的先前值。

我的第一个想法是设置状态值以跟踪处理的内容。如果新值与前一个值相同，我可以替换文本。但是我不能设置状态，因为它在渲染函数中：

警告：setState（...）：在现有状态转换期间（例如render内）无法更新。渲染方法应该是道具和状态的纯函数。

那么我如何跟踪正在渲染的值，或者有更好的方法来做到这一点？

我尝试过的例子：

var stuff = [1,1,1,2,2,2,3,3,3];

var foo = React.createClass({
  display: function(k) {
    return <line myStuff={k}>
  },
  render: function() {
    return (
      {Object.keys(stuff).sort().map(this.display)}
    )
  }
});

var line = React.createClass({
  getInitialState: function() {
    return { 
      currentValue: 0
    };
  },
  checkRepeat: function(value) {
    if (this.state.currentValue == value) {
      return '.'
    } else {
      this.setState({currentValue: value});
      return value;
    }
  },
  render: function() {
    <p>{this.checkRepeat(this.props.myStuff)}</p>
  }
});

谢谢！

Answer 1

您的代码目前的作用：

在<Foo>组件内，Object.keys(stuff).sort()将您的数组[1,1,1,2,2,2,3,3,3]转换为包含密钥的其他数组，因此result = ["0", "1", "2", "3", "4", "5", "6", "7", "8"]
然后使用这些结果中的每一个创建一个新的<Line>组件，传递＆＃34; 0＆＃34;，＆＃34; 1＆＃34;等作为组件的支柱。
<Line>组件内部代码的意图可能是检查传递的数字是否唯一（之前是<Line>组件中的数字）。如果是，请渲染数字，否则，渲染＆＃34;。＆＃34;

此代码的主要问题是您正在尝试在孩子（<Line>）内部，将其道具与兄弟孩子的道具进行比较。

这种比较数字逻辑的最佳位置是在父（<Foo>）内孩子（<Line>）确实应该有简单而孤立的逻辑：只需渲染父母发送的任何支柱。

修复：

将render()内的<Foo>功能更改为：

render: function() {
  // copy the stuff array to a new array, 
  // where we replace all repeated values with a "." symbol
  var stuffCopy = stuff.map((item,i) => 
    { return (i==0 || item != arr[i-1]) ? item.toString() : "." });
  return (
    {stuffCopy.map(this.display)}
  )
}

然后，您可以将<Line>组件简化为：

var line = React.createClass({
  // this component no longer needs state
  // it can simply render the prop
  render: function() {
    <p>{this.props.myStuff}</p>
  }
});

PS：＆＃34;以前＆＃34;可以有两个非常不同的含义：

＆＃34;前一时刻完全相同的变量的值＆＃34;：查看一个组件，其中状态或道具具有值A，然后发送新的道具或状态值B到一个组件。
＆＃34;同一个变量的值，在另一个实例中，同时渲染＆＃34;：如果同时渲染9个组件，之前的值可能意味着，兄弟组件的值，渲染在同一时刻，但出现在列表中的这个组件之前。

您的代码表明您的问题是关于意义nr。 2.（我的回答集中在那个意思上）。

React.js，如何在渲染时跟踪以前的值？

1 个答案: