我有一个仪表板组件，其中有两个组件用于选择我需要显示的数据。第一个选择指示客户端。第二个选择指示项目。第二选择的选项取决于所选的客户端。
当我选择客户端并将ID作为道具传递给第二个选择对象时，我会在仪表板中更改状态。这很好用，并且在设置const selectedClient = props.selectedClient;了第二个选择（如果我做出选择）之后，我console.log(selectedClient)看到它会发生变化。
但是，当我选择另一个客户端时，不会触发useEffect。
仪表板组件
class Dashboard extends Component {
constructor(props) {
super(props);
this.state = {
selectedClient: JSON.parse(localStorage.getItem('appState')).user.id,
selectedProject: 0
};
this.handleSelectChange = this.handleSelectChange.bind(this);
}
handleSelectChange(event) {
this.setState({selectedClient: event.target.value});
}
handleProjectChoice(event) {
this.setState({selectedProject: event.target.value});
}
render() {
return (
<div className={classes.Dashboard}>
<div className="container-fluid">
<div className="row">
<div className={`col-md-8 offset-md-2 col-xl-4 offset-xl-4 ${classes.clientChoice}`}>
<ClientChoice selectedClient={this.state.selectedClient} changed={this.handleSelectChange} />
</div>
</div>);
<div className="row">
<div className={`col-md-8 offset-md-2 col-xl-4 offset-xl-4 ${classes.projectChoice}`}>
<ProjectChoice selectedClient={this.state.selectedClient} selectedProject={this.state.selectedProject} changed={this.handleProjectChoice} />
</div>
</div>
<div className="row">
<div className={`col-12 ${classes.mainPanel}`}>
<ProjectInfo key={this.state.selectedProject} selectedProject={this.state.selectedProject} />
</div>
</div>
</div>
</div>
);
}
}
ProjectChoice组件
const ProjectChoice = (props) => {
const selectedClient = parseInt(props.selectedClient);
// const [selectedClient,setSelectedClient] = useState(props.selectedClient); => I tried this as well...
console.log("selectedClient in ProjectChoice");
console.log(selectedClient); // shows updated value
useEffect(() => {
console.log("In useEffect"); // does not appear => not triggered when component is re rendered
userService.getById(selectedClient)
.then(response => {
console.log(response);
});
},[]);
return (
// THIS IS NOT RELEVANT
);
};
您的useEffect有一个空的依赖项数组，这意味着它仅在第一个渲染器上触发。如果您希望它在依赖项发生更改时再次触发，请将该依赖项添加到数组，以便在该依赖项发生更改时都会触发useEffect。因此，在您的情况下，依赖关系将是selectedClient。
useEffect(() => {
console.log("In useEffect"); // does not appear => not triggered when component is re rendered
userService.getById(selectedClient)
.then(response => {
console.log(response);
});
},[selectedClient]);
官方文档中有关useEffect优化的更多信息。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句