[英]I am not able to add user input to state properly, getting map not a function error when it is
我有一個簡單的列表,它存儲在 App 組件中。 這用於顯示所有人,我希望能夠將新人添加到此列表中。 我無法將輸入添加到我的 state,我收到一個錯誤,即 map 不是 function。 我沒有正確創建數組嗎?
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
的 function 並將其命名為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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.