代码之家 › 专栏 › 技术社区 › jubskiko

为什么在使用React时,我的页面没有通过向数组中添加元素来更新

use-state reactjs arrays javascript

jubskiko · 技术社区 · 3 年前

我正在开发一个基本的react应用程序,我使用一个表单提交一个人的名字,然后它就会显示在屏幕上。输入名称后,数组确实得到了正确的更新,但屏幕上没有任何变化。这就是我用来显示这个人的名字。在本例中,我在persons上使用了useState,因此我认为它应该更新。我还没有反应过来,所以非常感谢你的帮助。提前谢谢

{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('')
}

2 回复 | 直到 3 年前

hamid mehmood 3 年前

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

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

Willey Ohana 3 年前

不幸的是,React并不认为您在使用这些数组函数时改变了状态。通常建议在setState调用中使用回调,如:

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

推荐文章

Megrez7 · C#ToArray转换合并为一行,导致数组元素更改

11 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

11 月前

Anka HanÄ±m · 关于结构和动态数组地址的问题

11 月前

Swapnil Supekar · 将二维阵列转换为一维阵列,并将一维阵列粘贴到另一张图纸上

11 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

11 月前

MaSc. H. · 大小与阵列大小

11 月前

Geremia · 2D NumPy数组+1D数组?

11 月前

MARTIN · 交换第一个和最后一个单词,反转所有中间的字符

1 年前

Paul Williams · 迭代数组时输出有问题

1 年前

Oliver Morgan · PostgreSQL错误:无法累积不同维度的数组

1 年前