javascript - 子组件未更新父属性的更新状态

Question

我有一个父组件，我从其中传递回调函数handleProjectStagesSave和一些数据作为子组件的 Prop 。在我的子组件中，我访问 props 并使用 useState 将 props 对象作为一个整体存储到状态。

父组件:

function ProjectStages(props) {
    const [projectStages, setProjectStages] = React.useState(null);

    useEffect(() => {
          ProjectAPI.getProjectStages().then((response) => {
            setProjectStages(response);
          });
    }, []);

    //this function is passed as prop to child component. child component send data through parameters back to parent
    function handleProjectStagesSave(val){     
      projectStages.someProperty = val;  //modifying state property here and updating the state below
      setProjectStages(projectStages);
    }

    if(projectStages === null){
      return (<Loader/>);
    }

    return (
      <div>
        {(() => {
           //loop through state data and pass props to child component
          return projectStages.phases.map((stage) => {
            return (
                <ProjectStageTile criterias={stage.criterias} stagesSave={handleProjectStagesSave}/>
            );
          });
        })()}
      </div>
    );
}

现在，子组件将回调函数传递给它自己的子组件 CriteriaScores，它基本上传递一些数据并将其一路发送回父组件。

子组件:

function ProjectStageTile(props){
    const [projectStageTileState, setProjectStageTileState] = React.useState(props);

    return projectStageTileState.criterias.map((criteria) => {

        return(
            <div>
                <div>
                    {criteria.selectedScore}
                </div>
                <CriteriaScores stagesSave={projectStageTileState.stagesSave} />
            </div>
        );
    });
}

它工作正常，我获取数据并在父组件中存储更新状态 setProjectStages(projectStages); 。现在，我希望子组件立即获得更新的状态数据。然而，我在React开发工具中看到的是，更新状态后，我手动更新子组件中的props，然后状态更改反射(reflect)在子组件中。知道出了什么问题吗？如果我能对此进行更多澄清，请告诉我。

更新 1:

我没有直接改变状态，而是尝试了类似下面的方法，但得到了相同的结果。

projectStages.phases.filter((phase) => (phase.gdfatStage === "bid"))[0].criterias
      .filter((criteria) => (criteria.criteriaId === val.split(' ')[1]))[0].selectedScore = val.split(' ')[2];
let newProjectStages = projectStages;
setProjectStages(newProjectStages);

更新2:

还尝试了以下方法，但没有成功。

let newProjectStages = projectStages;

newProjectStages.phases.filter((phase) => (phase.gdfatStage === "bid"))[0].criterias
.filter((criteria) => (criteria.criteriaId === val.split(' ')[1]))[0].selectedScore = val.split(' ')[2];

setProjectStages(newProjectStages);

Answer 1

projectStages 是一个状态变量，您可以直接改变它。

projectStages.someProperty = val; 

<小时/>

建议的方法如下:

setProjectStages(...projectStages, someProperty : val)

当你使用setProjectStages时，react会重新渲染，并且最新的状态变量将传递给子组件。