没有到达嵌套在 switch 语句中的 if 语句

Question

在阅读本文之前，请不要记下我的问题。

我的代码甚至没有进入 if 语句（我使用 console.logs 对此进行了测试）。我没有见过类似的答案。我什至添加了一个使用效果，如果是计时/异步问题，它可以修复它

目标：

我想测试一下是否有任何对的值是空字符串。如果是，我将其设置为等于我的代码中已有的静态值（下 大约）。

---

请注意：

我知道解决此问题的最简单方法是设置默认状态，但是，我想知道为什么我在这里实现的方法不起作用。另外，我不知道为什么这个问题被标记为具有类似的答案，这与设置状态有关...我的代码根本没有进入 if 语句！

---

问题：

问题是，无论看起来如何，我都没有进入任何 if 语句。我是否测试该值是否为false（空字符串应该是错误的值），或者我是否只是直接测试它们是否是一个字符串（哪个我知道他们是）无论如何。 FinalEdited 回合中的所有值都是来自受控反应输入的各个状态片段

我认为问题是：

此代码不起作用的原因是状态是IMUTTABLE这意味着您无法更改状态的值，因为每个键值都是状态的实际部分您必须分别设置其中每一项。 theFinalEditedBout 中的每个值都是其自己的状态，它来自与表单相关的受控反应输入。

代码：

         const takeInTheInputs = () => {

        let theFinalEditedBout = {
            topLineWrestler,
            bottomLineWrestler,
            dispatched,
            dispatchedToMat,
            winner,
            loser,
            matchNumber,
            round,
            score,
            userID: 1
        };


        (function () {
            let arrayOfKeyValuePairs = Object.entries(theFinalEditedBout);
            arrayOfKeyValuePairs.map((keyPair, index) => {
                console.log({ index, keyPair })

                switch (index) {
                    case 0:
                        console.log(`I got to case ${index}`);
                        console.log({ keyPairString: keyPair[1] });
                        if (keyPair[1] === '') {
                            setTopLineWrestler(bout.top_line_wrestler);
                            break;
                        } else {
                            break;
                        }
                    case 1:
                        console.log(`I got to case ${index}`)
                        console.log({ keyPairString: keyPair[1] });
                        if (keyPair[1] === '') {
                            setBottomLineWrestler(bout.bottom_line_wrestler);
                            // bout.bottomLineWrestler = bout.bottom_line_wrestler;
                            break;
                        } else {
                            break;
                        }
                    case 2:
                        console.log(`I got to case ${index}`)
                        console.log({ keyPairString: keyPair[1] });
                        if (keyPair[1] === '') {
                            setDispatched(bout.dispatched);
                            // bout.dispatched = bout.dispatched;
                            break;
                        } else {
                            break;
                        }
                    case 3:
                        console.log(`I got to case ${index}`)
                        console.log({ keyPairString: keyPair[1] });
                        if (keyPair[1] = '') {
                            setDispatchedToMat(12)
                            // bout.dispatchedToMat = bout.dispatched_to_mat;
                            break;
                        } else {
                            break;
                        }
                    case 4:
                        console.log(`I got to case ${index}`)
                        console.log({ keyPairString: keyPair[1] });
                        if (keyPair[1] === '') {
                            console.log("I am in")
                            setWinner(bout.winner)
                            // bout.winner = bout.winner;
                            break;
                        } else {
                            break;
                        }
                    case 5:
                        console.log(`I got to case ${index}`)
                        console.log({ keyPairString: keyPair[1] });
                        if (keyPair[1] === '') {
                            setLoser(bout.loser)
                            // bout.loser = bout.loser;
                            break;
                        } else {
                            break;
                        }
                    case 6:
                        console.log(`I got to case ${index}`)
                        console.log({ keyPairString: keyPair[1] });
                        if (keyPair[1] === '') {
                            setMatchNumber(bout.match_number);
                            // bout.matchNumber = bout.match_number;
                            break;
                        } else {
                            break;
                        }
                    case 7:
                        console.log(`I got to case ${index}`)
                        console.log({ keyPairString: keyPair[1] });
                        if (keyPair[1] === '') {
                            setRound(bout.round)
                            // bout.round = bout.round;
                            break;
                        } else {
                            break;
                        }
                    case 8:
                        console.log(`I got to case ${index}`)
                        console.log({ keyPairString: keyPair[1] });
                        if (keyPair[1] === '') {
                            setScore(bout.score)
                            // bout.score = bout.score;
                            break;
                        } else {
                            break;
                        }
                }
                console.log({
                    theFinalEditedBout,
                    bout
                });

            })

            useEffect(() => {
                setEditOfBout({
                    topLineWrestler,
                    bottomLineWrestler,
                    dispatched,
                    dispatchedToMat: Number(dispatchedToMat),
                    winner,
                    loser,
                    matchNumber,
                    round,
                    score,
                    userID: 1
                });
            }, [topLineWrestler,
                bottomLineWrestler,
                dispatched,
                dispatchedToMat,
                winner,
                loser,
                matchNumber,
                round,
                score,])
        })();

        const requestOptions = {
            method: "PUT",
            headers: {
                "Content-Type": "application/json",
                // Authorization: `Bearer token`,
            },
            body: JSON.stringify(editOfBout),
        };

        fetch(`/api/bouts/${BoutId}`, requestOptions).then((res) => {
            if (res.ok) {

            } else {
                alert("it didn't work! Coach Wayne Apologizes try again later");
            }
        });



    }

该函数名为

    return (
        <Form style={{ width: "90%", border: "2px solid slateGrey", borderRadius: "5px" }} className="mx-auto bg-dark text-light mt-2 p-2">

            <Form.Group className="mb-3" >
                <Form.Label>topLineWrestler</Form.Label>
                <Form.Control onChange={(e) => setTopLineWrestler(e.target.value)} type="text" placeholder="Enter email" />
                <Form.Text className="text-muted">
                    We'll never share your email with anyone else.
                </Form.Text>
            </Form.Group>

            <Form.Group className="mb-3" >
                <Form.Label>bottomLineWrestler</Form.Label>
                <Form.Control onChange={(e) => setBottomLineWrestler(e.target.value)} type="text" placeholder="Password" />
            </Form.Group>

            <Form.Group className="mb-3" >
                <Form.Label>dispatched</Form.Label>
                <Form.Control onChange={(e) => setDispatched(e.target.value)} type="number" placeholder="0 ===''  1 = true" />
            </Form.Group>

            <Form.Group className="mb-3" >
                <Form.Label>dispatchedToMat</Form.Label>
                <Form.Control onChange={(e) => setDispatchedToMat(e.target.value)} type="text" placeholder="text" />
            </Form.Group>

            <Form.Group className="mb-3" >
                <Form.Label>winner</Form.Label>
                <Form.Control onChange={(e) => setWinner(e.target.value)} type="text" placeholder="Password" />
            </Form.Group>

            <Form.Group className="mb-3" >
                <Form.Label>loser</Form.Label>
                <Form.Control onChange={(e) => setLoser(e.target.value)} type="text" placeholder="Password" />
            </Form.Group>

            <Form.Group className="mb-3" >
                <Form.Label>matchNumber</Form.Label>
                <Form.Control onChange={(e) => setMatchNumber(e.target.value)} type="text" placeholder="Password" />
            </Form.Group>

            <Form.Group className="mb-3" >
                <Form.Label>Round</Form.Label>
                <Form.Control onChange={(e) => setRound(e.target.value)} type="text" placeholder="Password" />
            </Form.Group>

            <Form.Group className="mb-3" >
                <Form.Label>Score</Form.Label>
                <Form.Control onChange={(e) => setScore(e.target.value)} type="text" placeholder="Password" />
            </Form.Group>

            <Button variant="primary" type="button" onClick={takeInTheInputs}>
                Submit
            </Button>
        </Form>

console.logs

• editOfBout: {}

• KeyPairString：在大多数键上记录空字符串

• theFinalEditedBout：记录其起始值

• bout：

{
bottom_line_wrestler: "{\"name\":\"bye\",\"team\":\"bye\",\"seed\":20}"
created_at: "2022-03-02T17:43:32.000Z"
created_by_user: 1
dispatched: 0
dispatched_to_mat: null
division_id: 3
event_division_bout_concatenated: "e2d3b7"
event_id: 2
id: 133
loser: null
match_number: 7
round: 1
score: null
top_line_wrestler: "{\"name\":\"bye\",\"team\":\"bye\",\"seed\":13}"
winner: null
}

Answer 1

我觉得您过于依赖所有设置器，认为它将立即执行（不是异步），然后将 setEditOfBout 与所有值状态一起使用。

简而言之，setState 是异步的 - 这意味着它们不会立即执行。例如，在您的代码（摘要）中：

function foo() {
  const val = Math.random();
  setScore(val);
  setEditOfBout({score});
}

不会更改 editOfBout 中的分数，因为分数稍后会更新，而 setEditOfBout 将使用当前值。

相反，请考虑（首先简化您的代码！然后）执行如下操作：

function foo() {
  const val = Math.random();
  setScore(val);
  setEditOfBout({score: val}); // <- HERE, don't use state score value
}