Question

我有一个约500项的表，我想要做的就是将数据推送到this.state.data并重新渲染表。发生的事情是添加了行，但数据未显示在行中。如果我在短时间内执行this.forceUpdate（），那么数据会神奇地出现在行中。我假设我的重新渲染是在状态更新之前发生的，我该如何解决这个问题呢？这是添加到this.state.data并重新呈现的代码：

// the format we expect
scrubData: function(rawData, cb) {
    const scrubbedData = rawData.map((object, idx) => {
        let { mediaserver = [] } = object.Relations;
        let { latitude = [0], longitude = [0] } = object.Properties;

        return {
            label: object.Label || '',
            name: object.Name || '',
            mediaserver: mediaserver[0] || '',
            geo: `${latitude[0]}, ${longitude[0]}`,
            status: '',
            event:  '',
        }
    });

    if (cb) {
        cb(scrubbedData);
        return;
    }

    return scrubbedData;
},

// push one item to the data array, so we don't have to call
// the entire data set all over again
addData: function(rawData) {
    const scrubbedData = this.scrubData([rawData], (scrubbedData) =>  {
        this.state.data.unshift(scrubbedData);

        this.setState({
            data: this.state.data,
        });
    });
},

Answer 1

这是因为您使用的是unshift。有了反应，你应该总是通过提供更新状态而不是通过改变当前状态来改变状态。

您可以使用concat或spread运算符，而不是使用unshift。

使用concat：

this.state.data.concat([scrubbedData]);

this.setState({
    data: this.state.data,
});

或使用点差运算符：

this.setState({
    data: [...this.state.data, scrubbedData]
});

我建议查看this stackoverflow post，其中列出了阵列的所有变异方法。

React通过比较对象/数组的引用来执行状态diff时内部工作，并且由于您正在改变数组，因此引用仍然相同，因此React不会检测到已经进行了更改。

这就是使用React的不可变库的好处，因为更改将始终生成副本，因此您可以删除整个类的错误，例如此。

编辑：

在添加新行之前，您正在调用this.scrubData，结果是新行没有要附加到其中的其他数据。尝试首先将新行添加到数组中，然后调用该函数将数据附加到每一行。

Answer 2

好的，所以我终于开始工作了。我不得不使用componentWillUpdate。不确定这是否正确，但它现在有效。

export default class Table extends React.Component {
   constructor(props) {
      super(props);

      this.state = {
         tableHeight: "50vh",
         data: [],
      }
   }

   componentWillUpdate(nextProps, nextState) {
      this.state.data = nextProps.data;
   }

   render() {
      const tableRow = this.state.data.map((object, idx) => {
         return (
            <TableRow key={idx} data={object} />
         )
      })

      return (
         <div className="table">
                  <tbody>
                     {tableRow}
                  </tbody>
               </table>
            </div>
         </div>
      )
   }
}

在行中向行添加行，添加行，但不添加数据

2 个答案:

编辑：