在 React 中，当它是 useEffect 的依赖项而不触发另一个 API 调用时，我如何将 append 值转换为功能 state？

Question

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

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

从逻辑上讲，上述一切都有效。 但是，向 API 发出额外请求似乎是错误的，只是为了接收已经可用的数据，但我找不到正确的模式来允许我将useCallback中可用的item推送到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

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

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