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

重投时不会触发useEffect

2 个答案: