在 reactJS 中单击按钮添加新用户

Question

我有以下代码

my code

我有一个“添加”按钮，当我单击“新用户”时，我的数组中添加了该按钮。

但是当我点击第二次、第三次时，它只在第一次工作......没有任何反应。我点了多少次这么多次“新用户”应该被添加到一个数组中。

像这样。

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

请帮我解决这个问题

Answer 1

在您的 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 - 是处理State的函数，但是你需要处理逻辑

Answer 2

发生这种情况是因为您正在重置数组的值以向其推送新值，您必须使用

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

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

Answer 3

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

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

Answer 4

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

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

进入...

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

之前的函数会不断地用自身重置 <NewUser/ >，因此只有 1。

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

在 reactJS 中单击按钮添加新用户

Add new user on button click in reactJS

javascript

reactjs

use-state