在“选择器”组件“onChange”上调用太快的函数答案

【问题标题】：Function called too fast on 'selector' component "onChange"在“选择器”组件“onChange”上调用太快的函数
【发布时间】：2021-12-29 09:15:30
【问题描述】：

当我更改选择器组件中的值时，我需要从我的 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>

onChange函数：

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

使用状态：

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

【问题讨论】：

一种选择可能是将projetName 传递给函数getClientByProject。这样您就可以确保使用正确的状态。

标签： javascript reactjs api react-hooks

【解决方案1】：

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

onChangeFunction

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

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

【讨论】：

函数体应该使用参数，目前没有。