javascript - 在 React 中将状态数据从父级更改为子级后如何立即获取状态数据？

Question

我有以下带有多个组件的 react 应用程序。我有两个子组件(卡片和模态)和一个父组件(板)。只需单击卡组件中的一张卡，然后将卡 ID 发送到板组件即可。板组件具有 API 数据。它使用来自卡组件的卡 ID 过滤 API 数据，并在模态组件中显示相关数据。

问题是，模态组件在单击卡片之前会在开头加载一个空数组，该数组是projectData。然后我无法获取数组内的任何元素，并为每个数组调用显示“无法获取未定义的属性”。

卡片组件:

class TaskItem extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      more_state: false
    }
  }

  render() {

    const { sendCardId } = this.props;

    return(
      <div onClick={() => sendCardId(task.projectID)}>
      </div>
    )
  }
}

板组件:

class Taskboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentID: null,
      projectAllData: [],
      open: false,
    };
  }

  getPojectId = (projectId) => {
    this.setState({
      open: true,
      currentId: projectId
    });

    API.get('project/' + projectId)
      .then(({ data }) => {
        this.setState({
          projectAllData: data.response
        });
      })
      .catch((err) => {
        console.log("AXIOS ERROR: ", err);
      })
  }

  render(){
    return(
      <ProjectModal
          handleOpen={this.state.open}
          handleClosed={this.handleClose}
          projectID={this.state.currentId}
          projectData={this.state.projectAllData}
        />

      <Column
        key={key}
        index={index}
        title={key}
        tasks={columns[key]}
        getCardId={this.getPojectId}
       />
    )
  }
}

模态组件:

class ProjectModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            status: 'To do',
        };
    }

    render(){

      const { handleOpen, handleClosed, projectData, projectID } = this.props;
      return(
         <div>{projectData.projectName}</div
      )
    }
}

Answer 1

使用 setState 一次。

getPojectId = (projectId) => {
    API.get('project/' + projectId)
      .then(({ data }) => {
        this.setState({
          projectAllData: data.response,
          open: true,
          currentId: projectId
        });
      })
      .catch((err) => {
        console.log("AXIOS ERROR: ", err);
      })
  }

并设置初始化状态对象而不是数组

this.state = {
      currentID: null,
      projectAllData: {projectName: ''},
      open: false,
    };

或者这可能会更好。

this.state = {
  currentID: null,
  projectAllData: undefined,
  open: false,
};
render(){
  return(
    <>
    {
      this.state.projectAllData && (
        <ProjectModal
          handleOpen={this.state.open}
          handleClosed={this.handleClose}
          projectID={this.state.currentId}
          projectData={this.state.projectAllData}
        />
      )
    }

    <Column
      key={key}
      index={index}
      title={key}
      tasks={columns[key]}
      getCardId={this.getPojectId}
      />
    </>
  )