时间戳

首页 > 解决方案 > 用于检查数组中是否存在值的 React hooks 每次都会给出一个错误的答案

reactjs - 用于检查数组中是否存在值的 React hooks 每次都会给出一个错误的答案

问题描述

我有一个简单的电话簿，它应该检查姓名是否存在于“人”数组中。我使用了person.map 和includes()。谁能解释为什么这段代码给出了一次“false”，当值应该是“true”时，即名称存在于 person 数组中？它每次都这样做，但只有一次。

// Get a hook function
const {useState} = React;

const App = () => {
  const [person, setPerson] = useState([{ name: "John Doe" }]);
  const [newName, setName] = useState("");

  const addName = (event) => {
    event.preventDefault();
    const nameObject = { name: newName };

    let mapped = person.map((ele) => ele.name);
    let found = mapped.includes(newName);
    console.log("found it? ", found);
  };
  const handleNameChange = (event) => {
    setName(event.target.value);
  };

  return (
    <form onSubmit={addName}>
      <div>
        name
        <input value={newName} onChange={handleNameChange} />
      </div>
      <div>
        <button type="submit">add</button>
      </div>
    </form>
  );
};

ReactDOM.render(
  <App />,
  document.getElementById("root")
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"/>

在此处输入图像描述

标签： reactjsreact-hooks

解决方案

当您想将项目添加到数组并更改状态时，您必须使用以下方式之一：

setPerson(person => person.concat(nameObject)) with .concat()
setPerson(person => [...person, nameObject]) with … spread

推荐阅读