如何渲染通過 ReactJS 中的道具的 object？

Question

我正在嘗試渲染來自道具的數據（對象）。 但是，我收到以下錯誤：
Uncaught TypeError: Cannot convert undefined or null to object Some how, I do not know why the data or object is null although the state of the data is updated during componentDidMount() . 你能幫我為什么數據是 null 嗎？

請看class A看看數據是怎么消耗的

class A extends React.Component {
  state = {
    data: null
  };

  componentDidMount() {
    this.data = this.props.location.state.data;
    this.setState({ data: this.props.location.state.data });
  }

  render() {
    return (
      <div>
        {Object.keys(this.data).map((key, index) => (
          <p key={index}> value is {this.data[key]}</p>
        ))}
        hello
      </div>
    );
  }
}

A.propTypes = {
  data: PropTypes.object,
  location: PropTypes.object
};
export default A;

假設this.data包含以下格式的數據

{
    id: 1,
    userName: "ABDXY",
    date: "01/12/2020",
    time: "21:00"
}

Answer 1

this.data未定義。 您可以使用this.state.data訪問 state 中設置的數據

請確保this.props.location.state.data不是 null

class A extends React.Component {
  state = {
    data: {}
  };

  componentDidMount() {
    // this.data = this.props.location.state.data;  => not required.
    this.setState({
      data: this.props.location.state.data
    });
  }

  render() {
    return ( <
      div > {
        Object.keys(this.state.data).map((key, index) => ( < 
          p key = {
            index
          } > value is {
            this.state.data[key]
          } < /p>
        ))
      }
      hello <
      /div>
    );
  }
}

Answer 2

從 state 而不是this.data獲取數據，因為當this.data更新時它不會觸發渲染。 也使用{}作為默認值

class A extends React.Component {
  state = {
    data: {}
  };

  componentDidMount() {
    const data = {
      id: 1,
      userName: "ABDXY",
      date: "01/12/2020",
      time: "21:00"
    };
    this.setState({ data });
  }

  render() {
    const { data } = this.state;
    return (
      <div>
        {Object.keys(data).map((key, index) => (
          <p key={index}> value is {data[key]}</p>
        ))}
        hello
      </div>
    );
  }
}

export default A;