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

Reactjs新手，所以我试图理解我缺少的概念

我有一个值数组，比如[1,1,1,2,2,2,3,3]，我想将其处理为：“1…2…3…”，但我不知道如何跟踪之前呈现的值

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

警告：设置状态（…）：无法在现有状态转换期间更新（例如在

渲染中）。渲染方法应该是道具和状态的纯函数

那么，我如何跟踪所呈现的值，或者有更好的方法来做到这一点

我尝试的示例：

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>
  }
});

var stuff=[1,1,1,2,2,3,3]；
var foo=React.createClass({
显示：功能（k）{
返回
},
render:function（）{
返回(
{Object.keys（stuff.sort（）.map（this.display）}
)
}
});
var line=React.createClass({
getInitialState:函数（）{
返回{
当前值：0
};
},
检查重复：函数（值）{
if（this.state.currentValue==值）{
返回''
}否则{
this.setState（{currentValue:value}）；
返回值；
}
},
render:function（）{
{this.checkRepeat（this.props.myStuff）}

}
});

谢谢大家!
 您的代码当前的功能：


在
组件内部，
对象.keys（stuff）.sort（）
将数组
[1,1,1,2,2,2,3,3,3]
转换为不同的数组，包含键，因此结果=
[“0”、“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”]
然后，每个结果都用于创建新的
组件，将“0”、“1”等作为道具传递给该组件
组件中代码的目的可能是检查传递的数字是否唯一（与之前的
组件中的数字相同）。如果是，则渲染数字，否则渲染“”

这段代码的主要问题是，您试图在一个子系统（
）内部将其道具与兄弟姐妹的道具进行比较

将这种比较数字的逻辑放在父级（
）中的最佳位置。

子系统（
）确实应该有简单而独立的逻辑：只需呈现父系统发送的任何道具

要修复：

将
中的
render（）
函数更改为：

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)}
  )
}

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

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

var line=React.createClass({
//此组件不再需要状态
//它可以简单地渲染道具
render:function（）{
{this.props.myStuff}

}
});

PS：“先前”可以有两种截然不同的含义：

“前一时刻完全相同变量的值”：查看一个组件，其中状态或状态值为a，然后向该组件发送一个新的状态值或状态值B
“同一变量的值，在另一个实例中，在同一时间渲染”：如果同时渲染9个组件，则上一个值可能表示在同一时刻渲染的同级组件的值，但显示在列表中该组件之前
您的代码表明您的问题是关于第2条含义的。（我的回答集中在这一点上）。
您的代码当前的功能：


在
组件内部，
对象.keys（stuff）.sort（）
将数组
[1,1,1,2,2,2,3,3,3]
转换为不同的数组，包含键，因此结果=
[“0”、“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”]
然后，每个结果都用于创建新的
组件，将“0”、“1”等作为道具传递给该组件
组件中代码的目的可能是检查传递的数字是否唯一（与之前的
组件中的数字相同）。如果是，则渲染数字，否则渲染“”

这段代码的主要问题是，您试图在一个子系统（
）内部将其道具与兄弟姐妹的道具进行比较

将这种比较数字的逻辑放在父级（
）中的最佳位置。

子系统（
）确实应该有简单而独立的逻辑：只需呈现父系统发送的任何道具

要修复：

将
中的
render（）
函数更改为：

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)}
  )
}

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

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

var line=React.createClass({
//此组件不再需要状态
//它可以简单地渲染道具
render:function（）{
{this.props.myStuff}

}
});

PS：“先前”可以有两种截然不同的含义：

“前一时刻完全相同变量的值”：查看一个组件，其中状态或状态值为a，然后向该组件发送一个新的状态值或状态值B
“同一变量的值，在另一个实例中，在同一时间渲染”：如果同时渲染9个组件，则上一个值可能表示在同一时刻渲染的同级组件的值，但显示在列表中该组件之前
您的代码表明您的问题是关于第2条含义的。（我的回答就是这个意思）。
你能解释一下你想要实现的目标吗？如果它是数组到字符串的一次性转换，那么我不建议您对此进行任何说明，只建议使用简单的javascript。什么是“提供的价值”？阵列？数组中的一个元素？绳子？两者都有？你能解释一下你想要达到的目标吗？如果它是数组到字符串的一次性转换，那么我不建议您对此进行任何说明，只建议使用简单的javascript。什么是“提供的价值”？阵列？一个