如何在 React.js 中的 api 中渲染和添加类似的项目到项目列表中？

Question

我有一个名为 ListItem 的组件，它有 7 个字段（组件）忽略图表它只有 4 个，所有都是反应选择组件，它还有每个 ListItem 的保存和删除图标。我正在使用上下文，在那里我设置了 lists=[] ，在 useEffect 上我已经将列表设置为我从 api 获得的对象数组。我有一个组件 Lists，它使用 map 函数呈现这个 ListItem 组件。现在我想在第一个 ListItem 的前面添加另一个列表，我可以这样做并且在数据库中创建了一条记录。我已经实现了分页，并且在分页时，我将所有处于状态的列表项与从 api 返回的项一起添加，因为我添加的产品被插入到数据库中，所以在最后一页的 api 调用中，我也得到了我在顶部添加的数据，所以我看到两次相同的数据。 1）当我单击添加产品时 2）作为记录添加到数据库以来的最后一个 ListItem。处理这种场景的正确方法是什么。如果我无法理解，请忽略，因为这是我的第一个问题。

Answer 1

没有看到你的代码很难给出具体的建议，但我想我理解这个问题。您需要将添加的项目与从数据库中检索的项目分开。您还需要将任何 UI 状态与数据分开。

就用户体验而言，我认为将他们刚刚添加的项目显示在顶部是很好的，即使它实际上并不属于该页面。我会采用不同的样式（可能是较暗的背景颜色）以表明这是一个添加的项目，而不是列表的真正元素。

当他们导航到列表的不同页面时，不应再将添加的项目放在前面。他们只会在列表中的实际位置看到添加的项目，该位置可能在该页面上，也可能不在该页面上。

这里有一些我将如何处理的伪代码。

const List = () => {
  
  // store the current page (or possibly store it in the context)
  const [page, setPage] = useState(1);

  // some hook which accesses API data via context
  // should refresh the API fetch when the page changes
  const items = useListPage(page);

  // store items which were added while on this page
  const [addedItems, setAddedItems] = useState([]);

  // clear added items on page change
  useEffect(() => {
    setAddedItems([]);
  }, [page]);

  return (
    <div>
      <AddForm
        // AddForm component would handle the POST request
        // if successful, add that item to the List state via onSuccess callback
        onSuccess={(object) => setAddedItems([object, ...addedItems])}
      />
      {addedItems.map((item) => (
        <ListItem
          {...item}
          key={item.id}
          temporary={true} // some sort of flag to control styling
        />
      ))}
      {items.map((item) => (
        <ListItem
          {...item} 
          key={item.id} 
          temporary={false}
        />
      ))}
      <Pagination 
        page={page}
        setPage={page}
      />
    </div>
  );
};