Question

我不明白为什么TableContainer|TableComponent组件无法正确更新其子代的原因。在商店中，当我尝试更新对象属性时，我有一组对象，Table却没有更新其值。如果我替换整个数组，它仍然可以工作。

您可以在此sandbox中检查此行为。

文档指出，启动可观察数组也使项目也可观察。（docs）

类似于对象，可以使用来观察数组 observable.array（values？）或将数组传递给observable。这个也可以递归工作，因此数组的所有（未来）值将也可以观察到。

为什么会发生这种情况？我来自redux背景，我试图将自己的头缠在mobx上，但收效甚微。

Answer 1

您的FlipScrollTable组件也应该是observer

Answer 2

尝试将注入直接添加到TableComponent，以获得无状态解决方案：

@inject("store")
@observer
class FlipScrollTable extends React.Component {
  componentDidMount() {}

  render() {
    var { columns, header } = this.props;
    var { array } = this.props.store;
    const classes = {};
    return (
      <table>
        <thead>
          <tr>
            {columns.map((column, i) => {
              var { header, headerStyle } = column;
              return (
                <th key={i} style={headerStyle}>
                  {header}
                </th>
              );
            })}
          </tr>
        </thead>
        <tbody>
          {array.map(row => {
            var tableCells = columns.map(column => {
              var { accessor, id, Value } = column;
              var value = _isFunction(accessor)
                ? accessor(row)
                : _get(row, accessor);

              var renderedValue = normalizeComponent(
                Value,
                { value, row },
                value
              );

              return (
                <td key={_isFunction(accessor) ? id : accessor}>
                  {renderedValue}
                </td>
              );
            });
            return <tr key={row.id}>{tableCells}</tr>;
          })}
        </tbody>
      </table>
    );
  }
}

参考您的沙箱，您似乎在尝试渲染组件后尝试对其进行更改；您应该直接从可观察到的阵列更改中重新渲染组件。

可观察数组中的项目更改后，Mobx不会重新渲染

2 个答案: