时间戳

首页 > 解决方案 > 首次单击时获得空白数组？

javascript - 首次单击时获得空白数组？

问题描述

我遇到了一个 Reactjs 问题。App.js 文件中提到了该问题。请调查一下。最初所有按钮都是白色的，不可点击，一段时间后我怎么能改变那里的颜色。我应该使用useEffect钩子还是其他方式。我没有随机获取按钮的索引来更改它们的颜色和isDisable.

三种按钮

  1. 白色：最初所有按钮都是白色的，不可点击。
  2. 红色：从白色按钮中随机出现一个按钮将变为红色且可点击。
  3. 蓝色：单击的按钮。单击红色按钮后颜色将变为蓝色且不可单击。

当所有白色按钮变为蓝色时，在屏幕中央弹出自定义弹出窗口，图标为“你赢了游戏……！！！”

我正在尝试下面的代码来随机更改按钮颜色，但失败了。

const changeColorHandle = () => {
    const rand = Math.floor(Math.random() * 4);
    btnArray.map((i, k) => {
      if (i.index === rand) {
        return ([...btnArray, { color: 'red', isDisable: false }])
      }
      return [...btnArray]
    })
    console.log(rand)
  };

  useEffect(() => {
    if (btnArray.length > 0) {
      setTimeout(() => {
        changeColorHandle()
      }, 2000);
    }
  }, [btnArray])

任何人都可以在这里解决这个问题。并告诉我我在哪里做错了。

谢谢。

标签： javascriptreactjsreact-reduxreact-hooks

解决方案

您不想真正弄乱新的反应钩子的一件事是它们并没有真正同步应用更改，这样有时您可能会有一点延迟。

我认为这不是问题所在，但您可以使用更有效的代码来解决问题:)

代码沙箱在这里

更改了行的原始片段在这里：

import React, { useState } from "react";
import Button from "./Button";

const Game = () => {
  const [buttonValue, setButtonValue] = useState(0);
  const [btnArray, setBtnArray] = useState([]);

  const handleChange = e => {
    setButtonValue(parseInt(e.target.value, 10));
  };

  const onClickHandle = () => {
    const tmpArray = [];
    for (let i = 0; i < buttonValue; i++) {
      tmpArray.push({ color: "white", isDisable: true });
    }
    setBtnArray(tmpArray);
  };

  const changeColorHandle = () => {
    alert("clicked");
  };
  
  (rest is ok )

如您所见，buttonValue被删除，而 的工作onClick只是根据输入的实际值生成一个新数组。

用户使用输入值不会有任何问题，因为btnArray只有在他单击按钮后才会呈现 :) （由完成的状态更改触发的呈现setBtnArray()

编辑：一个不错的添加可能是作为字符串摆脱，buttonValue因为您可以对其使用数学运算，而不是来回使用字符串转换

推荐阅读