@cester

Как обновить state child-a с parent компонента, react?

Добрый день! Подскажите пожалуйста как в react обновить state child с родителя если, child выводится циклом?
Оновиться ли он в таком случае?
Пример компонентов
export default class ParentBlock extends Component {
  static propTypes = {
    blocks: PropTypes.arrayOf(PropTypes.object),
  };

  render() {
    const { blocks } = this.props;
    return (
      <ParentBlocksList blocks={blocks} />
    )
  }
}


const ParentBlocksList = ({
  blocks,
}) => (
  <div>
    {blocks.map(block => (
      <ParentBlockItem
        key={block.id}
        name={block.name}
        values={block.values}
        disabled={block.disabled || false}
      />
    ))}
  </div>
);


const ParentBlockItem = ({
  name,
  values,
  disabled,
}) => (
  <div>
    <table>
      <tbody>
        {Object.entries(values).map(([name, val]) => (
          <ChildBlockItemRow
            key={name}
            name={name}
            value={val}
            disabled={disabled}
          />
      ))}
      </tbody>
    </table>
  </div>
);


export default class Child extends Component {
  static propTypes = {
    name: PropTypes.string,
    value: PropTypes.string,
    disabled: PropTypes.bool,
  };

  state = {
    value: this.props.value,
  };

  handleChange = (e) => {
    const { value } = e.target;

    this.setState({
      value,
    });
  };

  render() {
    const { name, disabled } = this.props;
    const { value } = this.state;

    return (
      <tr>
        <td>{name}</td>
        <td>
          <input
            type="text"
            value={value}
            onChange={this.handleChange}
            disabled={disabled}
            ref={(el) => {
              this.input = el;
            }}
          />
        </td>
      </tr>
    );
  }
}


Нужно чтоб Child обновлялся с ParentBlock компонента.
Скажите пожалуйста какое есть решение?
  • Вопрос задан
  • 358 просмотров
Пригласить эксперта
Ответы на вопрос 1
maxfarseer
@maxfarseer
https://maxpfrontend.ru, обучаю реакту и компании
Ну так же как всегда, изменяете blocks - получается происходит перерисовка.
Чтобы избавиться от лишних перерисовок, если нельзя изменить такую вложенность, то добавляйте shouldComponentUpdate хук
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы