在组件"onChange"上调用'selector'函数太快

Question

当我更改选择器组件中的值时，我需要从API中检索数据。因此，我所做的是创建一个函数来获取数据，并在选择器"onChange"中调用它。现在我的问题是，在我的fetch函数中，我使用了一个在调用它之前设置的变量。当我第一次更改选择器值时，我的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>

on更改功能：

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

提取功能：

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

useState:

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

Answer 1

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

onChangeFunction

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

FetchFunction

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

说明：我只是将数据作为参数传递给函数，以确保函数始终具有当前数据。