反应字母游戏答案

【问题标题】：React letter game反应字母游戏
【发布时间】：2021-07-19 08:01:47
【问题描述】：

用 react.js 开发的命中与错过游戏，带有功能组件**

【问题讨论】：

initialState中的元素顺序甚至不能改变？
@Medi 想想一个混乱的文字游戏，但只有一个正确的序列或正确的短语，例如 A、B、C、D、E、F 中的正确短语。如果返回是 A、B、D、C、E、F，则词序是错误的，也不会是正确的。在这种情况下，您是否觉得让初始状态感到困惑很有趣？或者我可以选择通过数组放置单词的位置吗？

标签： arrays reactjs react-functional-component

【解决方案1】：

我们可以通过在buttons 中添加另一个道具来实现这一点，在被点击后无需更改initialState：我只发布了修改后的代码，完整的例子在codesandbox。

 const buttonClickHandler = (id) => {
    if (count === 0) {
      return;
    }
    setCount(count - 1);
    // Update an array of objects
     setButtons(
      initialState.map((element) =>
        [...buttons]
          .sort((a, b) => (b.label < a.label ? 1 : -1))
          .map((item, index) =>
            item.id === id
              ? {
                  ...item,
                  clicked: true,
                  inOrder: !index
                    ? item.isRight
                    : item.isRight &&
                      buttons.sort((a, b) => (b.label < a.label ? 1 : -1))[
                        index - 1
                      ].clicked,
                  disabled: true
                }
              : item
          )
          .find((item) => item.id === element.id)
      )
    );
  };
...
const checkIfCorrect = () => {
    let correct = buttons.filter(
      (item) => item.clicked === true && item.isRight === true && item.inOrder
    ).length;
    if (correct === 6) {
      setCorrect(true);
    } else {
      setCorrect(false);
    }
  };

【讨论】：

这种情况下，您可以通过在此处检查您的代码来更改按钮的初始状态，它也带来了一个很好的选择。
我可以创建一个单独的状态，但是由于限制只是不能修改initialState，所以我认为可以更改buttons 状态。
我不知道为什么我不能在不改变问题按钮的位置（id）的情况下留下正确的答案序列。
@André 我忘记将按钮恢复为原始顺序。我更新了答案。

【解决方案2】：

你缺少的是按钮被点击的顺序和正确答案的顺序。

创建一个状态来维护按钮的 id 序列，按照它们被点击的顺序：

const [sequence, setSequence] = useState([]);

以正确（预期）的顺序创建一个包含按钮 ID 的数组：

const correctSequence = [1, 5, 3, 8, 2, 4];

然后在buttonClickHandler里面添加这段代码：

setSequence([...sequence, id]);

在resetGame函数中也加入这段代码：

setSequence([]);

最后将checkIfCorrect 函数更改为：

  const checkIfCorrect = () => {
    if (correctSequence.length === sequence.length) {
      for (let i = 0; i < sequence.length; i++) {
        if (sequence[i] !== correctSequence[i]) {
          setCorrect(false);
          return;
        }
      }
      setCorrect(true);
    } else {
      setCorrect(false);
    }
  };

【讨论】：

正确性的逻辑是正确的，但是当我单击问题按钮时，它会不断改变答案的顺序。