重新渲染时不会触发 useEffect

Question

我有一个仪表板组件，其中有两个组件用于选择我需要显示的数据。第一个选择表示客户端。第二个选择表示项目。第二个选择的选项取决于选择的客户端。

当我选择客户端并将 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
    );
};

Answer 1

你的 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]);

official documentation 中有关 useEffect 优化的更多信息。

Answer 2

试试这个方法，

useEffect(() => {
    console.log("In useEffect"); // does not appear => not triggered when component is re rendered
    userService.getById(selectedClient)
        .then(response => {
            console.log(response);
        });
},[selectedClient]);