我有一个存储在 App 组件中的简单列表。这用于显示所有人员,我希望能够将新人员添加到此列表中。我无法将输入添加到我的状态中,我收到一个错误消息,指出 map 不是一个函数。我没有正确创建数组吗?
const App = () => {
const [persons, setPersons] = useState([
{
name: 'Artos Hellas',
id: 1
}
]);
const [newName, setNewName] = useState('');
const handleNewName = event => {
setNewName(event.target.value);
};
const addName = event => {
event.preventDefault();
const personObject = {
name: newName,
id: persons.length + 1
};
setPersons(persons.concat(personObject));
setPersons('');
};
const rows = () => persons.map(p => <li key={p.key}>{p.name}</li>);
return (
<div>
<h2>Phonebook</h2>
<form onSubmit={addName}>
<div>
name : <input value={newName} onChange={handleNewName} />
</div>
<div>
<button type="submit">add</button>
</div>
</form>
<h2>Numbers</h2>
<ul>{rows()}</ul>
</div>
);
};
最佳答案
删除 setPersons('');
语句,您可能想使用 setNewName('')
:
const addName = event => {
event.preventDefault();
const personObject = {
name: newName,
id: persons.length + 1
};
setPersons(persons.concat(personObject));
// setPersons('');
setNewName('');
};
还有,你弄错了key
渲染列表元素时的 Prop :
// v Not p.key
const rows = () => persons.map(p => <li key={p.id}>{p.name}</li>);
此外,当您使用名为 row
的函数时会让人感到困惑并称之为row()
,您可以尝试将其命名为类似 renderRows
的操作或者只使用 ReactElement
数组:
const renderRows = () => persons.map(p => <li key={p.id}>{p.name}</li>);
<ul>{renderRows()}</ul>
// Or
const rows = persons.map(p => <li key={p.id}>{p.name}</li>);
<ul>{rows}</ul>
关于javascript - 我无法正确地将用户输入添加到状态,得到 map not a function error 当它是,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58029899/