在 useEffect 中反应 setState 第一次调用不会起作用答案

【问题标题】：React setState inside useEffect wont work first call在 useEffect 中反应 setState 第一次调用不会起作用
【发布时间】：2020-12-15 15:45:23
【问题描述】：

我的 onpress 方法使用 useEffect 中的 promise 触发了按下的 useEffect api，并根据传入的数据集 myDataStt 并将数据分配给 getData 函数我想相应地采取行动，但我登录到 getData 函数。触发useEffect myDataStt 不会改变，第二次按下按钮这次成功myDataStt 是改变但第一次按下按钮不起作用（触发使用效果并且值正确）我不明白为什么，感谢cmets

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);
}}>

【问题讨论】：

标签： javascript reactjs react-native react-hooks

【解决方案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>

【讨论】：

不，我不想要这个，我将代码缩短为我在其他地方使用 getData 函数和初始化的示例

【解决方案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备注，调用你的api不需要2个状态，尝试在按钮中使用onClick。

【讨论】：