为什么在使用 React 时我的页面没有随着向我的数组添加元素而更新

Question

我正在开发一个基本的 React 应用程序，我使用表单提交一个人的名字，然后它会显示在屏幕上。输入名称后，数组会正确更新，但屏幕上没有任何变化。这就是我用来显示此人姓名的内容。在这种情况下，我对 persons 使用了 useState，所以我认为它应该更新。我对 React 还是很陌生，所以非常感谢您的帮助。提前致谢

{persons.map(person =>
    <div key={person}>{person.name}</div>
}

编辑：

const [persons, setPersons] = useState([
     { name: 'Arto Hellas' }
]) 
const [newName, setNewName] = useState('')

const addPerson = (event) => {
     event.preventDefault()
     setPersons(persons.concat(newName))
     setNewName('')
}

Answer 1

不幸的是，当你使用这些类型的数组函数时，React 并不认为你已经改变了状态。通常建议在 setState 调用中使用回调，例如：

const addPerson = (e) => {
    e.preventDefault();
    setPersons((prevPersons) => [...prevPersons, { name: newName }]);
    setNewName('');
}

Answer 2

const [persons, setPersons] = useState([
     { name: 'Arto Hellas' }
]) 
const [newName, setNewName] = useState('')

const addPerson = (event) => {
     event.preventDefault()
     setPersons([...persons,{name:newName}])
     setNewName('')
}

为什么在使用 React 时我的页面没有随着向我的数组添加元素而更新

Why is my page not updating with the addition of an element to my array when using React

javascript

arrays

reactjs

use-state