Function 在“选择器”组件“onChange”上调用太快

Question

当我更改选择器组件中的值时，我需要从 API 中检索数据。 所以我所做的是创建一个 function 来获取我的数据，并在我的选择器“onChange”中调用它。 现在我的问题是，在我的 fetch function 中，我使用了一个我在调用它之前设置的变量。 当我第一次更改选择器值时，我的 useState 变量未设置（或我的应用程序未检测到），当我第二次更改值时，它终于起作用了。 我该如何解决？

选择器组件：

<Select
                                                    labelId="demo-statut-label"
                                                    id="demo-statut"
                                                    defaultValue={""}
                                                    value={projetName}
                                                    onChange={handleSelectProjectChange}
                                                    input={<OutlinedInput label="Projet"/>}
                                                    MenuProps={MenuProps}
                                                >
                                                    {projets.map((projet) => (
                                                        <MenuItem
                                                            value={projet}
                                                        >
                                                            {projet.nom}
                                                        </MenuItem>
                                                    ))}
                                                </Select>

onChange function：

 const handleSelectProjectChange =  (event) => {
    setProjetName(event.target.value);
    getClientByProject();
};

获取 Function：

function getClientByProject() {
     axios
        .get(API_URL_CLIENT_BY_ACTIVITE + projetName.id)
        .then((response) => {
            if(response.status === 200) {
                setClient(response.data);
                console.log('Response : ', response.data);

            }
        })
        .catch((error) => {
            console.log(error);
        })
}

使用状态：

const tab = projets !== null && projets !== undefined && projets.length > 0 ? projets[0] : {}
const [projetName, setProjetName] = useState(tab);

Answer 1

react 中有一个叫做 useContext 的钩子，你应该尝试使用它，它将删除“状态尚未更新”的所有未来实例。 同时，解决您当前问题的最快方法是...

onChange 函数

const handleSelectProjectChange =  (event) => {
    setProjetName(event.target.value);
    getClientByProject(e.target.value);
};

获取函数

function getClientByProject(project) {
     axios
        .get(API_URL_CLIENT_BY_ACTIVITE + projetName.id)
        .then((response) => {
            if(response.status === 200) {
                setClient(response.data);
                console.log('Response : ', response.data);

            }
        })
        .catch((error) => {
            console.log(error);
        })
}

说明：我刚刚将数据作为参数传递给 function 以确保 Function 始终具有当前数据。