javascript - 状态更改时不渲染

Question

我正在学习 react 。我正在尝试根据名称对列表进行排序。 ShoppingList组件是

const ShoppingList = () => {
    const [items, setItems] = useState([]);

    const data = [
        {id: 1, name: 'Soda'},
        {id: 2, name: 'ice'},
    ];

    useEffect(() => {
        setItems(data);
    }, []);
    
    const handleSort = () => {}
   return ();

}

单击按钮后，我尝试对数据进行排序并显示它。

<button onClick={() => handleSort()}>Sort by name</button>

handleSort()内功能

const sortItems = items.sort((a, b) => {
    const nameA = a.name.toUpperCase();
    const nameB = b.name.toUpperCase();
    if(nameA < nameB)
        return -1;
    if(nameA > nameB)
        return 1;
    return 0;
});

console.log(sortItems);
setItems(sortItems);

console.log(sortItems)显示排序后的数组。但不在 DOM 中渲染。 里面return ，我正在尝试以这种格式显示排序后的数据

<ul>
    {items.map((item) => {
        return (
            <li key={item.id}>
              <span>{item.name}&nbsp;</span>
              <button onClick={() => handleRemove(item.id)}>&times;</button>
            </li>
        );
        })
     }
</ul>

我在这里缺少什么？

Answer 1

我建议使用 useMemo 派生排序的项目列表，因此它的“派生状态”取决于项目数组和所需的排序顺序。

• 不要使用 useEffect 作为初始状态。 useState 接受初始状态的创建者函数。
• localeCompare 是返回 -1、0、+1 进行比较的更简洁方法。
• [...items](items 的浅拷贝)是必需的，因为 .sort() 对数组进行排序 -地点。

const sortByName = (a, b) => a.name.toUpperCase().localeCompare(b.name.toUpperCase());

const ShoppingList = () => {
  const [items, setItems] = useState(() => [
    { id: 1, name: "Soda" },
    { id: 2, name: "ice" },
  ]);
  const [sortOrder, setSortOrder] = useState("original");
  const sortedItems = React.useMemo(() => {
    switch (sortOrder) {
      case "byName":
        return [...items].sort(sortByName);
      default:
        return items;
    }
  }, [items, sortOrder]);

  return (
    <>
      <button onClick={() => setSortOrder("byName")}>Sort by name</button>
      <button onClick={() => setSortOrder("original")}>Sort in original order</button>
      <ul>
        {sortedItems.map((el, i) => (
          <li key={el.id}>
            <span>{el.name}&nbsp;</span>
            <button>&times;</button>
          </li>
        ))}
      </ul>
    </>
  );
};