javascript - 从 Prop react 未定义的setState

我有两个部分：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。有什么建议吗？

最佳答案

两个问题：


您的render方法正在尝试使用尚未初始化的状态来渲染FormDialog。状态将是不确定的，直到您在构造函数中将其设置为：

constructor(props) {
    super(props);

    this.state = {
        order: this.props.order,
    }
}

由于您只是从父组件传递了一个prop，因此足以渲染该组件而不会出错。这样，您无需调用componentDidMount或您的情况下的componentWillMount，就可以将其完全删除。




您在未安装的组件中调用setState，这将始终在React中导致错误。顾名思义，componentWillMount在组件安装之前被调用，您应该使用componentDidMount来确保在调用setState之前已安装组件。


此外，在较新版本的React中不建议使用componentWillMount，因此不建议在代码中使用它。

From React official documentation



另外请注意，在我看来，您在这两个组件中具有不必要的状态重复。考虑将订单数据仅保留在FormDialog组件中，因为它可能是唯一更新订单数据的组件。

关于javascript - 从 Prop react 未定义的setState，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55054643/