时间戳

首页 > 解决方案 > 我无法正确地将用户输入添加到状态，当它出现时，地图不是函数错误

javascript - 我无法正确地将用户输入添加到状态，当它出现时，地图不是函数错误

问题描述

我有一个简单的列表，它存储在 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>
  );
};

标签： javascriptreactjs

解决方案

删除setPersons('');语句，您可能想使用setNewName('')：

const addName = event => {
  event.preventDefault();
  const personObject = {
    name: newName,
    id: persons.length + 1
  };
  setPersons(persons.concat(personObject));
  // setPersons('');
  setNewName('');
};

key此外，您在渲染列表元素时得到了错误的道具：

//                                            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>

推荐阅读