Question

如何在“ addItem”（缩略词）中将loading状态添加为true，以及如何将loading状态设置为false？

但是我被卡在了react-hook https://codesandbox.io/s/new-water-vczdp

我在这里做过：https://codesandbox.io/s/react-todolist-3dko3，带有较旧的React版本。

在这里做什么？

case "addItem": {
      //fakeHttp();

      const { toAddItem, items } = state;
      const nextId = +items[items.length - 1].id + 1;

      return {
        items: [...items, { id: nextId, name: toAddItem }],
        loading: false
      };
    }

Answer 1

您不必在减速器中调用异步函数。您必须为此使用其他挂钩。在您的情况下，您应该使用useCallback钩子：

function App() {
  const [{ items, toAddItem, loading }, dispatch] = useReducer(
    reducer,
    initialState
  );

  const addItem = useCallback(() => {
    async function fakeHttp() {
      dispatch({ type: "loading" });
      await delay(500);
      dispatch({ type: "addItem"})
    }
    fakeHttp();
  }, []);

  return (
    ...
    <AddList
        handleInput={e =>
          dispatch({ type: "handleInput", value: e.target.value })
        }
        toAddItem={toAddItem}
        addItem={addItem}
        loading={loading}
      />
  )
}

我在您的沙箱示例中进行了一些更改。您可以在此处看到一个有效的示例： https://codesandbox.io/embed/stupefied-currying-l39il

在react-hook中有回调的多个调度？

1 个答案: