子组件未通过父属性更新更新状态

Question

我有一个父组件，我从那里传递一个回调函数handleProjectStagesSave和一些数据作为子组件的道具。在我的子组件中，我正在访问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，然后状态更改反映在 Child 组件中。知道出了什么问题吗？如果我能澄清更多，请告诉我。

更新-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反应将重新渲染，最新的状态变量将被传递给子组件。

Answer 2

这奏效了：

const newProjectStages = Object.assign({}, projectStages); //this is important
newProjectStages.phases.filter((phase) => (phase.gdfatStage === "bid"))[0].criterias
.filter((criteria) => (criteria.criteriaId === val.split(' ')[1]))[0].selectedScore = val.split(' ')[2];
setProjectStages(newProjectStages);

Answer 3

除了 @user9408899 提供的答案之外，我还要补充一点，子组件不需要将其 props 存储在状态中。我会把它改成：

function ProjectStageTile(props){
const {criteria, stagesSave} = props;
return criterias.map((criteria) => {
return(
<div>
<div>
{criteria.selectedScore}
</div>
<CriteriaScores stagesSave={stagesSave} />
</div>
);
});
}