Реагировать неопределенным setState из реквизита

Question

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

Компоненты заказов

class Orders extends Component {
 state={
    open: false,
    order: {
      address: '',
      client: '',
      date: '',
      estimated_time: '',
      id: 0,
      order_no: '',
      original_order_no: '',
      phone: '',
      place: '',
      position: '',
      status: '',
      team: ''
    }
  }
 render() {
    return (
      <div>
        <FormDialog open={this.state.open} order={this.state.order}/>
      </div>
    );
  }

Компонент FormDialog

export default class FormDialog extends React.Component {

  constructor(...props) {
    super(...props);
    this.state = {
      order: {
        address: '',
        client: '',
        date: '',
        estimated_time: '',
        id: 0,
        order_no: '',
        original_order_no: '',
        phone: '',
        place: '',
        position: '',
        status: '',
        team: ''
      }
    };
  }
  async componentWillMount()
    this.setState({order: this.props.order})
  };
  render() {
    return (
      <div>{this.state.order.team}</div>
  )}

Это отображение TypeError: this.state.order is undefined при попытке компиляции. Любое предложение?

Answer 1

Два выпуска:

1. Ваш метод рендеринга пытается отрисовать FormDialog, используя состояние, которое еще не инициализировано. Состояние будет undefined , пока вы не установите его внутри конструктора, например:

   constructor(props) {
       super(props);
   
       this.state = {
           order: this.props.order,
       }
   }
   

Поскольку вы просто передаете реквизит от родительского компонента, этого будет достаточно для визуализации компонента без ошибок. Таким образом, вам не нужно вызывать componentDidMount или, в вашем случае, componentWillMount , и вы можете удалить его вообще.

---

2. Вы вызываете setState в неустановленном компоненте, что всегда приводит к ошибке в React. Как следует из названия, componentWillMount вызывается непосредственно перед монтированием компонента, и вместо этого следует использовать componentDidMount , чтобы убедиться, что компонент смонтирован перед вызовом setState .

Кроме того, componentWillMount устарело в новых версиях React и больше не рекомендуется использовать в коде.

Из официальной документации React

---

Дополнительное примечание: мне кажется, что у вас есть ненужное дублирование состояния в этих двух компонентах. Рекомендуется хранить данные заказа только в компоненте FormDialog, поскольку он, вероятно, будет единственным компонентом, обновляющим данные заказа.

Answer 2

супер (реквизит), не супер (... реквизит) то же самое для конструктора

Эта ссылка на документ показывает правильный путь

https://reactjs.org/docs/react-component.html#constructor

Простопосле конструктора код все еще корректен, но после того, как componentWillMount state.order заменяется this.props.order, который не инициализирован из-за первой ошибки.

Answer 3

Вы должны избегать дублирования состояния, вы можете сделать компонент FormDialog без сохранения состояния, возможно, даже функциональный компонент. Не забудьте использовать как можно больше компонентов без сохранения состояния.

import React from 'react';

const FormDialog = props => {
  return (
    <div>
      {props.order.team}
    </div>
  );
};

export default FormDialog;

Несмотря на это, похоже, что ваша ошибка TypeError появляется, потому что вы

(1) Опечатка, это должно быть

constructor (props) {
super (props);
this.state = bla bla bla ...;
  }

или просто

state= bla bla bla ... 

как вы сделали в компоненте Orders

(2) Пробная установка вызова до установки компонента. Изменение async componentWillMount () на componentDidMount () должно работать.

Но не беспокойтесь об этом, после изменения компонента на функциональный компонент он не должен появляться.