0

我有两个组件：Orders并且FormDialog，第一个是第二个的父亲。我试图将数据作为属性从Ordersto发送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>
    );
  }

窗体对话框组件

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尝试编译时显示此信息。有什么建议吗？

4

3 回答 3

2

两个问题：

  1. 您的渲染方法正在尝试使用尚未初始化的状态渲染 FormDialog。状态将是未定义的，直到您在构造函数中设置它，例如：

    constructor(props) {
    super(props);

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

由于您只是从父组件传递一个道具，这足以无错误地渲染组件。这样您就不需要调用componentDidMount或者在您的情况下调用componentWillMount，并且可以完全删除它。

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

此外，componentWillMount在较新版本的 React 中已被弃用，不再建议在代码中使用。

来自 React 官方文档

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

于 2019-03-08T00:12:08.977 回答
1

超级（道具），而不是超级（...道具）构造函数相同

该文档的链接显示了正确的方法

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

就在构造函数之后，代码仍然是正确的，但是在 componentWillMount state.order 被 this.props.order 替换之后，由于第一个错误而没有初始化。

于 2019-03-08T00:00:04.847 回答
0

你应该避免状态重复，你可以使 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 ...

就像您在订单组件中所做的那样

(2) 尝试在组件挂载前调用 setstate。将异步 componentWillMount() 更改为 componentDidMount() 应该可以工作。

但是不用担心，在将组件更改为功能组件后，它不应该出现。

于 2019-03-08T01:11:05.363 回答