Mobx 不会在可观察数组中的项目发生更改后重新呈现

Question

我不明白为什么 TableContainer|TableComponent 组件不更新它的子组件 properly.In 我有一个对象数组的商店，当我试图更新对象时属性 Table 不更新它的 values.If 我替换了它正在工作的整个数组。

您可以在此 sandbox.

中检查此行为

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

Similar to objects, arrays can be made observable using observable.array(values?) or by passing an array to observable. This works recursively as well, so all (future) values of the array will also be 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 不会在可观察数组中的项目发生更改后重新呈现

Mobx does not rerender after an item in observable array has changed

javascript

reactjs

mobx

mobx-react