在 React 中，当它是 useEffect 的依赖项而不触发另一个 API 调用时，我如何将值附加到功能状态？

Question

我有一个待办事项列表应用程序，用户可以在其中阅读和保存项目。在这里，Todo 是一个功能组件，它使用 useEffect() 挂钩查询 API 以获取用户列表中的当前项目。当收到成功的响应时，数据将使用 useState() 添加到组件的状态，并作为 ItemList 组件的一部分呈现。

当用户在 AddItemForm 组件中提交表单时，会触发一个回调，更新 newItem 的状态，useEffect 的依赖项，这会触发对API 并重新渲染组件。

从逻辑上讲，上面的一切都有效。但是，向 API 发出额外请求只是为了接收已经可用的数据似乎是错误的，但我找不到允许我推送 item 可用的正确模式 useCallback 到 items 数组而不导致 useEffect 无限循环但仍然更新 ItemList 组件。

我的应用程序是否可以在更新视图时将新日期从表单提交推送到 items 数组，并且仅在页面加载时调用一次 API？

function Todo() {
  const [items, setItems] = useState();
  const [newItem, setNewItem] = useState();

  useEffect(() => {
    fetch('https://example.com/items').then(
      (response) => {
        setItems(response.data.items);
      }, (error) => {
        console.log(error);
      },
    );
  }, [newItem]);

  const updateItemList = useCallback((item) => {
    setNewItem(item);
  });

  return (
    <>
      <AddItemForm callback={updateItemList} />
      <ItemList items={items} />
    </>
  );
}


function ItemList(props) {
  const { items } = props;
  return (
    <div>
      { items
        && items.map((item) => <p>{item.description}</p>)}
    </div>
  );
}

Answer 1

仅在开始时调用 API，方法是从 useEffect(...,[]) 中删除 newItem。然后在setItems中通过解构将item添加到items中：

  const updateItemList = (item) => {
    setItems([...items, item]);
  }

在 React 中，当它是 useEffect 的依赖项而不触发另一个 API 调用时，我如何将值附加到功能状态？

In React how can I append values to functional state when it is a dependency of useEffect without triggering another API call?

javascript

reactjs

use-effect

use-state