Mobx не рендерится после изменения элемента в наблюдаемом массиве

Question

Я не могу понять, почему компонент TableContainer|TableComponent не обновляет свои дочерние элементы должным образом. В магазине у меня есть массив объектов, когда я пытаюсь обновить свойство объекта, Table не обновляет свои значения. Если я заменю весь массив, он будет работать.

Вы можете проверить это поведение в этой песочнице .

Документация гласит, что инициирование наблюдаемого массива также делает элементы наблюдаемыми. ( docs )

Подобно объектам, массивы можно сделать видимыми, используя observable.array (values?) или путем передачи массива в observable. это также работает рекурсивно, поэтому все (будущие) значения массива будут также быть наблюдаемым.

Почему это происходит? Я исхожу из избыточного фона и пытаюсь обернуть голову вокруг mobx без особого успеха.

Answer 1

Попробуйте добавить инъекцию непосредственно в компонент 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>
    );
  }
}

Применительно к вашей песочнице кажется, что вы пытаетесь изменить компонент после его рендеринга; где вы должны повторно визуализировать компоненты непосредственно из наблюдаемых изменений массива.

Answer 2

Ваш компонент FlipScrollTable также должен быть observer