Javascript 反应：在列表的开头添加项

我有一个显示姓名的简单列表。当我尝试添加新名称时，它会添加到列表的末尾

如何在列表顶部添加新名称？ 我尝试了推送和取消移动，每次都出现以下错误

list.map is not a function

代码：

---

您可以使用排列运算符并具有：

手动功能{ const newList=[{name}，…list]； setListnewList； 集合名； }

---

您可以使用排列运算符并具有：

手动功能{ const newList=[{name}，…list]； setListnewList； 集合名； } 从React导入React，{useState}； 从react-dom导入ReactDOM； 导入./styles.css； 导出默认值=>{ 常量初始值列表=[ { id:1， 姓名：约翰 }, { id:2， 姓名:Doe }, { id:3， 姓名：Seb } ]; const[list，setList]=React.useStateinitialList； const[name，setName]=React.useState； 函数handleChangeevent{ setNameevent.target.value； } 手动功能{ const newList=[{name}，…list]；//只需创建一个新数组并扩展上一个数组 setListnewList； 集合名； } 回来 添加 { } {list.mapitem，索引=> {item.name} } ; }; 从React导入React，{useState}； 从react-dom导入ReactDOM； 导入./styles.css； 导出默认值=>{ 常量初始值列表=[ { id:1， 姓名：约翰 }, { id:2， 姓名:Doe }, { id:3， 姓名：Seb } ]; const[list，setList]=React.useStateinitialList； const[name，setName]=React.useState； 函数handleChangeevent{ setNameevent.target.value； } 手动功能{ const newList=[{name}，…list]；//只需创建一个新数组并扩展上一个数组 setListnewList； 集合名； } 回来 添加 { } {list.mapitem，索引=> {item.name} } ;

---

}; 当您按array.pushelement或array.unshiftelement向数组添加元素时，它将始终返回数组的新长度

    const initialList = [
        {
          id: "1",
          name: "John"
        },
        {
          id: "2",
          name: "Doe"
        },
        {
          id: "3",
          name: "Seb"
        }
      ];
  const [list, setList] = React.useState(initialList);
  const [name, setName] = React.useState("");

    
    

function handleAdd() {
      const newList = list.push({ name }); // returns new length
      setList(newList);
      setName("");
 }

在这里，它将newList值设置为4，而不是newList

---

当您尝试在数字4上应用map时，它将返回。map不起作用，因为它仅适用于项目列表，而不适用于数字。与反移位相同。

当您按array.pushelement或array.unshiftelement向数组添加元素时，它将始终返回数组的新长度

    const initialList = [
        {
          id: "1",
          name: "John"
        },
        {
          id: "2",
          name: "Doe"
        },
        {
          id: "3",
          name: "Seb"
        }
      ];
  const [list, setList] = React.useState(initialList);
  const [name, setName] = React.useState("");

    
    

function handleAdd() {
      const newList = list.push({ name }); // returns new length
      setList(newList);
      setName("");
 }

在这里，它将newList值设置为4，而不是newList

---

当您尝试在数字4上应用map时，它将返回。map不起作用，因为它仅适用于项目列表，而不适用于数字。取消换档也一样。

我明白了。我使用了上面建议的方法，效果很好。因此，在这种情况下，push和unshift根本不能使用，对吗？@AlyaKra如果使用push，它将在现有列表的末尾进行push，而不会返回新列表。如果您使用相同的列表来设置状态，则react认为没有任何更改，因为即使在设置状态之后，它也具有相同的引用，因此它不会重新渲染。啊，我明白了。非常感谢你！我懂了。我使用了上面建议的方法，效果很好。因此，在这种情况下，push和unshift根本不能使用，对吗？@AlyaKra如果使用push，它将在现有列表的末尾进行push，而不会返回新列表。如果您使用相同的列表来设置状态，则react认为没有任何更改，因为即使在设置状态之后，它也具有相同的引用，因此它不会重新渲染。啊，我明白了。非常感谢你！

<div>
  {list.map((item, index) => (
      <li key={item.id}>
        <div>{item.name}</div>
      </li>
      ))}
</div>