Question

我正在构建一个页面，以便在加载时从API读取数据，但是在尝试重用该函数以获取数据时遇到警告an effect function must not return anything besides a function which is used for clean-up

const dispatch = useDispatch();
useEffect(() => {
    // this way does not work as I expected, my page does not show data I fetched
    const getData = async () => {
        const result = await dispatch(actions.getList())；
        setState(result);
    };
    getData();
},[isFirstLoaded]);

但是尝试以下操作时会收到警告

const dispatch = useDispatch();

const getData = async () => {
    const result = await dispatch(actions.getList());
    setState(result);
};

useEffect(async() => {
    // this way gives me the data but with a warning
    await getData();
},[isFirstLoaded]);

我应该如何重用getData函数？如果我不在这里使用async和await，则不会更新状态。当我在此处使用async和await时，得到警告。谢谢。

Answer 1

总的来说，您正在朝着正确的方向前进。为了获取数据，您需要使用Effect并将[]作为第二个参数，以确保仅在初始安装时触发。

我相信您可以从解耦获取功能中受益，并使其更加通用，例如：

const fetchJson = async (url) => {
  const response = await fetch(url);
  return response.json();
};

const Fetch = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchJson("https://api.coindesk.com/v1/bpi/currentprice.json")
      .then(({ disclaimer }) => setData(disclaimer));
  }, []);

  return <Text>{data}</Text>;
};

在React Native中重用异步功能

1 个答案: