在按钮上单击按钮添加新用户

Question

我有以下代码

my code

我有一个“添加”按钮，当我单击“新用户”时，它已添加到数组中。

但是，只有当我单击第二，第三...时，它才第一次起作用。 我应点击多少次将“新用户”添加到数组中。

像这样

我正在使用功能组件和useState挂钩。

请帮助我解决该问题

Answer 1

将<NewUser />放入setAddNew([...addNew])数组中。检查以下代码：

function add() {
   setAddNew([...addNew, <NewUser />]);
}

Answer 2

在您的Add.jsx中尝试此代码

import React, { useState } from "react";

function Add() {
  const [addNew, setAddNew] = useState([]);
  function add() {
    // HERE is the change, you need to keep the previous values 
    setAddNew([...addNew, <NewUser />]);
  }

  return (
    <div>
      <button onClick={add}>Add </button>
      <div> {addNew} </div>
    </div>
  );
}
const NewUser = () => {
  return (
    <p>
      <div>New User </div>
    </p>
  );
};

export default Add;

addNew-状态，在这种情况下是数组。

setAddNew-是处理状态的函数，但是您需要处理逻辑

Answer 3

之所以发生这种情况，是因为您要重置数组的值以将新值推入到它中，您必须使用

setAddNew((old) => [...old, <NewUser />]);

这将复制您的旧数组，并将新元素插入其中

Answer 4

在Add.jsx中需要更改的是：

  function add() {
    setAddNew(<NewUser />);
  }

进入...

  function add() {
    setAddNew([...addNew, <NewUser />]);
  }

上一个函数将自行重置<NewUser/ >，因此仅为1.。

在数组addNew中通过...addNew添加先前的[]状态时，即为[...addNew, <NewUser />]，这将采用addNew的先前状态并添加最重要的是<NewUser />。