Javascript 在可观察数组中的项目发生更改后，Mobx不会重新加载

我无法了解

TableContainer | TableComponent

组件未正确更新其子组件的原因。在一个存储中，我有一个对象数组，当我尝试更新对象属性时，

表

不会更新其值。如果我替换整个数组，它仍在工作

您可以在本文档中检查此行为

文档说明，启动可观察数组会使项目也可观察。（）

与对象类似，可以使用 数组（值？）或通过将数组传递给可观察对象。这 也可以递归工作，因此数组的所有（未来）值都将 也可以观察到。

---

为什么会发生这种情况？我来自redux的背景，我正试图绕过mobx，但没有多大成功。

您的FlipScrollTable组件也应该是一个

观察者
尝试将您的注入直接添加到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>
    );
  }
}

@inject（“存储”）
@观察者
类FlipScrollTable扩展了React.Component{
componentDidMount（）{}
render（）{
var{columns，header}=this.props；
var{array}=this.props.store；
常量类={}；
返回(
{columns.map（（column，i）=>{
var{header，headerStyle}=列；
返回(
{header}
);
})}
{array.map（行=>{
var tableCells=columns.map（column=>{
var{accessor，id，Value}=列；
var值=_isu函数（访问器）
？存取器（世界其他地区）
：_get（行、访问器）；
var renderedValue=normalizeComponent(
价值
{值，行}，
价值
);
返回(
{renderdValue}
);
});
返回{tableCells}；
})}
);
}
}

参考您的沙盒，您似乎正在尝试在渲染组件后更改该组件；您应该直接从可观察的数组更改中重新渲染组件。
谢谢这样做，但这很奇怪，我想要这个“哑巴”组件保持沉默。是否有其他解决方案？如果我错了，请纠正我，但表示组件不应该有这样的逻辑。表示组件不应该对此负责。此解决方案打破了模式。此模式是否适用于mobx？如果您想从可观察的可观察数据中获益，你必须使用观察员。否则，您不应该将可观察数据传递到“dumb”组件中，而是将普通数据传递给它。这就像传入RXJS流，但从不订阅。谢谢，我将尝试进一步深入了解mobx。Cheers Hanks@Jason Mullings。@mwestrate提供了相同的解决方案，但这有点打破了组件模式。无论如何，
值
列渲染器包装在Observer组件中。干杯！试着想象每个组件都是一个图像！它只能由注入其中的信息/数据创建。若你们继续设想组件，你们只会限制你们的功能范围。这可能有助于扩展我所指的内容：