onClick按钮不运行功能

Question

我是Nextjs的新手，目前正在创建我的第一个应用程序。我有以下问题：

我创建了一个名为build()的函数，它执行以下操作：

• 向数组中添加5个相同的元素(“QuestionMark”)。
• clone "agents“数组。
• 运行一个for循环以确定”值“的数量，然后选择一个随机代理，然后将其添加到”选中“数组中并从克隆数组中删除。
• 返回选中的数组。

然后我做了

picked = build()

若要更新所选数组，请执行以下操作。在我的代码中，我做了一个“选中”数组的映射来显示这些图像。

为了便于理解，下面是以格式化方式编写的代码：

function formTeam() {
  let agents = [
    "Astra",
    "Breach",
    "Brimstone",
    "Chamber",
    "Cypher",
    "Jett",
    "KayO",
    "Killjoy",
    "Neon",
    "Omen",
    "Phoenix",
    "Raze",
    "Reyna",
    "Sage",
    "Skye",
    "Sova",
    "Fade",
    "Viper",
    "Yoru",
  ];
  const [value, setValue] = React.useState(0);
  const handleChange = (value) => setValue(value)

    let picked = Array(5).fill("QuestionMark");
    const build = () => {
        let clone = [...agents];
        for (let i = 0; i < value; i++) {
            let random = Math.floor(Math.random() * clone.length);
            picked[i] = `${clone[random]}`;
            clone.splice(random, 1);
        }

        return picked;
    };
    picked = build();
  return (
    <div>
// This is where I get "value" (range 2-5)
      <FormControl>
        <Center>
          <FormLabel>Players</FormLabel>
          <NumberInput
            max={5}
            min={2}
            value={value}
            onChange={handleChange}
            w={"500px"}
          >
            <NumberInputField />
            <NumberInputStepper>
              <NumberIncrementStepper />
              <NumberDecrementStepper />
            </NumberInputStepper>
          </NumberInput>
        </Center>
      </FormControl>

      <Center>
        <Button
            onClick={build}
            >
            Build
            </Button>
      </Center>
      
      <Grid templateColumns={"repeat(5, 1fr)"} gap={20} mt={20}>
        {
// Mapping the array and making it return "AgentCard" which is basically just a box with the agent image on it, the passed in "image" is just the path to that image.
            picked.map(agent => {
                return (
                    <GridItem w="150px">
                        <AgentCard image={`/images/valorant/agents/${agent}.png`} />
                    </GridItem>
                )
            })
        }
      </Grid>
    </div>
  );
}

所以这里要做的是，当值发生变化时，网格会自动更新--这太棒了--但是当单击" build“它并没有真正构建时(我稍后会将"build”重命名为“刷新”)，我想要做的就是单击"build“它构建一个不同的团队组成(reruns ()和/或将”选中“数组设置为一个新的团队组合。

我已经尝试了很多不同的东西，我确定为什么会发生这种情况，请解释一下为什么会发生这种情况，如果有任何代码优化或不同的方法，请解释一下。

记者:我知道标题可能有点误导情况，但老实说，我不知道还有什么可以放进去，因为我不知道什么不起作用，也不知道如何在标题中解释。如果稍后我找到一个更好的标题，或者一旦它解决了，我会想出一个方法来解决这个问题。

提前谢谢你。

Answer 1

点击“”就可以创建一个不同的团队组成

因此，基本上您希望在每次单击时更新选中的数组，并重新呈现新选定的团队。

为此，您需要执行以下操作

构建函数不应该修改组件的任何变量，相反，它应该返回带有修改数据的新对象，如下所示

const build = () => {
    let res= Array(5).fill("QuestionMark");
    let clone = [...agents];
    for (let i = 0; i < value; i++) {
        let random = Math.floor(Math.random() * clone.length);
        res[i] = `${clone[random]}`;
        clone.splice(random, 1);
    }
    return res;
};

现在声明被选中为组件的一个状态，如下所示

const [picked,setPicked]=useState([])

现在，要初始化build，可以直接用useState调用useEffect，也可以像下面这样使用useEffect钩子

useEffect(()=>{
   setPicked(build());
},[])`

最后，您应该像这样处理单击事件

<Button            onClick={()=>{ setPicked(build())    }}            >