如何在 React.js 中從 api 的項目列表中呈現和添加類似項目？

Question

我有一個名為 ListItem 的組件，它有 7 個字段（組件）忽略圖表，它只有 4 個，都是反應 select 組件，它還有每個 ListItem 的保存和刪除圖標。 我正在使用上下文，其中我設置了列表 = []，在 useEffect 上我已將列表設置為從 api 獲得的對象數組。 我有一個組件列表，它使用 map function 呈現此 ListItem 組件。 現在我想在第一個 ListItem 的前面添加另一個列表，我可以這樣做，並且在數據庫中創建了一條記錄。 我已經實現了分頁，並且在分頁時，我將 state 中的所有列表項以及從 api 返回的項目添加到數據庫中，因此在 Z8A5DA52ED1264417D359我在頂部添加的數據，所以我看到兩次相同的數據。 1）當我單擊添加產品時 2）作為記錄添加到數據庫以來的最后一個 ListItem。 處理這種場景的正確方法是什么。 如果我無法理解，請忽略，因為這是我的第一個問題。

Answer 1

沒有看到你的代碼很難給出具體的建議，但我想我理解這個問題。 您需要將添加的項目與從數據庫中檢索的項目分開。 您還需要將任何 UI state 與數據分開。

就用戶體驗而言，我認為將他們剛剛添加的項目顯示在頂部是很好的，即使它實際上並不屬於該頁面。 我會采用不同的樣式（可能是較暗的背景顏色），以表明這是一個添加的項目，而不是列表的真實元素。

當他們導航到列表的不同頁面時，不應再添加添加的項目。 他們只會在列表中的實際 position 中看到添加的項目，該列表可能在該頁面上，也可能不在該頁面上。

這是一些關於我將如何處理的偽代碼。

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>
  );
};