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

我有以下几个组件的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
      )
    }
}

类任务项扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
更多州：假
}
}
render（）{
const{sendCardId}=this.props；
返回(
sendCardId（task.projectID）}>
)
}
}

电路板组件：

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
      )
    }
}

类任务板扩展组件{
建造师（道具）{
超级（道具）；
此.state={
currentID:null，
projectAllData:[]，
开：错，
};
}
getPojectId=（projectId）=>{
这是我的国家({
开放：是的，
currentId:projectId
});
API.get（'project/'+projectd）
。然后（{data}）=>{
这是我的国家({
projectAllData:data.response
});
})
.catch（（错误）=>{
log（“AXIOS错误：”，err）；
})
}
render（）{
返回(
)
}
}

模态分量：

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
      )
    }
}

类ProjectModal扩展组件{
建造师（道具）{
超级（道具）；
此.state={
状态：“待办事项”，
};
}
render（）{
const{handleOpen，handleClosed，projectData，projectd}=this.props；
返回(
{projectData.projectName}使用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}
      />
    </>
  )

this.state={
currentID:null，
projectAllData:未定义，
开：错，
};
render（）{
返回(
{
this.state.projectAllData&&(
)
}
)
@DavidJohns正如Thole所说，您必须修改state
projectAllData
数组以对象include
projectName
@kkangil问题是，我在一张卡上点击两次后得到了projectName，这意味着状态将在第二次更新。获取
projectName
结果的点击函数在哪里axios的de>getPojectId

函数获取

projectName

结果，但您不使用上述任何代码。@kkangil您可以在卡组件中的div中看到

onclick

方法。它将使用项目id激发

sendCardId

方法，并使用

getProjectId

方法在board组件中捕获它。它将调用API并将所有项目数据，包括

projectName

发送到模态组件。@DavidJohns ok，但projectAllData没有

projectName

，它是数组。为什么在getPojectId中调用setState两次？只需使用一次。