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

Question

new to Reactjs, so I'm trying to understand what concepts I'm missing.

I have an array of values, say [1,1,1,2,2,2,3,3,3] that I would like to process it as: "1...2...3...", but I have no idea how to keep track of what the previous value that was rendered.

My first thought was to set a state value to keep track what was processed. If the new value is the same as the previous, I can replace the text. But I can't set the state since it's in the rendering function:

Warning: setState(...): Cannot update during an existing state transition (such as within render ). Render methods should be a pure function of props and state.

So how can I keep track of the value being rendered, or is there a better way to do this?

Example of what I tried:

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

Thank you!

Answer 1

What your code currently does:

• inside <Foo> component, Object.keys(stuff).sort() turns your array [1,1,1,2,2,2,3,3,3] into a different array, containing the keys, so result = ["0", "1", "2", "3", "4", "5", "6", "7", "8"]
• each of these results is then used to create a new <Line> component, passing the "0", "1" etc as a prop to the component.
• The intention of the code inside the <Line> component is probably to check if the number passed is unique (same a number from <Line> component before). If so, render the number, otherwise, render "."

Main issue with this code is that you are trying inside a child ( <Line> ), to compare its prop with a prop of a sibling child.

The best place to put this logic of comparing numbers, is inside the parent ( <Foo> ).
The child ( <Line> ) really should have simple and isolated logic: just render whatever prop the parent sends.

To fix:

Change the render() function inside <Foo> to:

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

Then you can simplify your <Line> component to:

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

PS: "Previous" can have two very different meanings:

1. "the value of the exact same variable at a previous moment in time": looking at one component, where the state or prop had value A, and then a new prop or state value of B is sent to the one component.
2. "the value of the same variable, in another instance, rendered at the same time": if you render 9 components at the same time, previous value could mean, the value of the sibling component, rendered at the same moment, but appearing before this component in the list.

Your code suggests your question is about meaning nr. 2. (and my answer is focused on that meaning).