Question

我的onpress方法使用useEffect中的promise触发了按下的useEffect api，并根据传入数据集myDataStt并将数据分配给getData函数，我想据此采取措施，但我登录到getData func。触发useEffect myDataStt不会更改，第二次按按钮此次成功myDataStt已更改，但第一次按按钮将不起作用（使用效果已触发且值正确），我不明白为什么，谢谢发表评论

const [pressed, setPressed] = useState(false);
const [myDataStt, setMyData] = useState(announcements);

useEffect(() => {
CallApi.then(
    values => {
        setMyData(values);
        const data = getData();
    }),
}, [pressed]);

const getData = () => {
    return myDataStt.dataFirst || [];
};

<Button
    onPress={() => {
        setPressed(true);
}}>

Answer 1

您不应以useEffect的方式使用。让您的按钮实际执行API调用。如果您希望API在组件安装架上加载数据，请在useEffect中单击它，然后单击它。不需要按下状态。您可以将函数分配给回调，这样就不会触发无限循环。

const getData = useCallback(async () => {
  const values = await CallApi();
  setMyData(values);
}, [setMyData]);

useEffect(()=> {
  getData();
}, [getData])

<Button onClick={() => getData()}>Refresh API</Button>

Answer 2

查看此完整组件是否适合您。

import React, { useState, useEffect } from 'react';

const CallAPI = () => {
  //do your request/fetch
};

export const Component = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const initialCall = async () => {
      const values = await CallAPI();
      setData(values);
    };
    initialCall();
    return () => {
      //clean your fetch
    };
  }, []);

  const handleClick = async () => {
    const values = await CallAPI();
    setData(values);
  };

  return (
    <>
      <button onClick={handleClick}>Add</button>
      {data.map(item => {
        return <div>{item}</div>;
      })}
    </>
  );
};

2条评论，您不需要2种状态来调用您的api，请尝试使用onClick in按钮。

在useEffect中反应setState将无法正常工作

2 个答案: