Как отобразить и добавить похожий элемент в список элементов из API в React.js?

Трудно дать конкретный совет, не видя вашего кода, но я думаю, что понимаю проблему. Вам нужно хранить элементы, которые вы добавляете, отдельно от тех, которые вы извлекаете из базы данных. Вам также необходимо отделять любое состояние пользовательского интерфейса от данных.

С точки зрения пользовательского опыта, я думаю, хорошо показывать элемент, который они только что добавили, вверху, даже если он на самом деле не принадлежит этой странице. Я бы стилизовал его по-другому (возможно, с более темным цветом фона), чтобы указать, что это добавленный элемент, а не настоящий элемент списка.

Когда они переходят на другую страницу списка, добавленный элемент больше не должен добавляться в начале. Они увидят добавленный элемент только в его фактическом положении в списке, который может быть или не быть на этой странице.

Вот некоторый псевдокод того, как я бы справился с этим.

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