Question

早上好。

在这里，我正在尝试对个人项目的React进行改进，以尝试涉及到所有内容，尤其是注册表（带有Hooks）。

我有很多可以解决的问题，但我承认找不到太多，否则我做错了...

让我解释一下：

我有一个运行良好的多选组件（它是一个lib），并返回了一个数组[{label: ..., value: ...}, {label: ..., value: ...}]。

对于表单，我有一个用户状态，该状态允许我存储所有信息

const [user, setUser] = useState({
        email: "",
        pseudo: "",
        password: "",
        plateforme: "",
        description: "",
        createAt: new Date(),
        updateAt: new Date(),
        logoName: "logo.png",
        password: "",
        passwordConfirm: "",
        games: []
});

const [selectedGames, setSelectedGames] = useState([]);

我的问题，选定的游戏和user.games未同步...知道游戏正在等待API URL (/api/games/...)数组，我想我会做的是在["api/games/...","/api/games..."]调用的try-catch之前，在表单的句柄提交中将选定的games.value切换到临时数组API中...

const handleSubmit = async e => {
    e.preventDefault();
    const apiErrors = {};
    const gamesSelector = []
    selectedGames.forEach(game => {
        gamesSelector.push('api/games/'+game.value)
    })
    setUser({...user, games: gamesSelector})
    if(user.password !== user.passwordConfirm) {
        apiErrors.passwordConfirm = "Votre confirmation de mot de passe n'est pas conforme avec le mot de passe original"
        setErrors(apiErrors)
        return;
    }
    try {
        await usersApi.register(user)
        setErrors({})
    } catch (error) {
        const { violations } = error.response.data;
        if (violations) {
            violations.forEach(violation => {
                apiErrors[violation.propertyPath] = violation.message
            })
            setErrors(apiErrors);
        }
    }
}

我最感兴趣的部分是顶部，我的问题是API调用没有等待循环结束，user.games的状态总是落后一步gamesSelector（如果我第一次验证它为空，第二次验证它是否为空，等等）。

我已经尝试过诺言并等待寻找，但是每次遇到相同的问题时……

我还指出，多选择onchange已经用于setSelectedGames，因此我目前无法对user.games进行操作...

<MultiSelect
    options={games}
    value={selectedGames}
    onChange={setSelectedGames}
    labelledBy={"Select"}
/>

我可能做错了，这就是为什么我要你的帮助^^'。

对不起，如果我的英语不好，我是法语：/

反应-等待异步函数中的foreach循环结束

0 个答案: