У меня есть страница с дочерним компонентом для кнопки просмотра, на родительском компоненте, с обратным вызовом, я установил состояние с помощью просматриваемого файла.

По какой-то причине из-за другого обратного вызова, передаваемого вышестоящему родительскому компоненту, состояние не устанавливается с прикрепленным файлом. Если я удаляю второй обратный вызов this.props.handleChange('attachment', file);, все работает нормально. Есть идеи почему? (Со вторым обратным вызовом все в порядке, нет ошибок и т. Д.)

Attachment страница:

export default class Attachment extends React.Component {
  state = {
    attachment: {},
  };

  handleAddAttachment = file => {
    this.setState({ attachment: file });
    this.props.handleChange('attachment', file); // this causes the previous line to not working.
  };

  render() {
    const { attachment } = this.state;

    return (
      <Fragment>
        <div>
          <div>
            Do you have
            <br />
            something to <LineBreak />
            show me?
          </div>
          <div css={attach}>Upload attachments here</div>
          <AttachmentButton  handleAddAttachment={this.handleAddAttachment} />
          <AttachedFile attachment={attachment} />
        </div>
      </Fragment>
    );
  }
}

makeHandleChange метод на родительском компоненте:

  makeHandleChange = (pageName, change) => {
    this.setState({
      ticket: { ...this.state.ticket, [pageName]: change },
    });
  };
0
user3378165 1 Май 2019 в 21:11

3 ответа

Лучший ответ

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

<Attachment key="attachment-key" />
0
duc mai 3 Май 2019 в 07:34

Я не знаю, почему это не работает, но вы можете попробовать обходной путь: передать функцию в качестве второго аргумента setState.

Смотрите пример здесь: правильно отреагировать на обратный вызов состояния набора аргумент

0
Yossi 1 Май 2019 в 18:20

Поскольку мы не знаем контекста того, что делает this.props.handleChange(), я даю общий ответ. Попробуйте изменить функцию следующим образом:

  handleAddAttachment = file => {
    this.setState({
      attachment: file 
    }, () => {
       this.props.handleChange('attachment', file);
    });  
  };
0
Avanthika 1 Май 2019 в 18:22