Question

尝试在useEffect上加载数据后更新状态。能够更新局部变量但不能更新状态。我正在遵循https://www.robinwieruch.de/react-hooks-fetch-data/中的一个示例，其中Robin以类似的方式设置状态。由于某种原因，在我的情况下，永远不会正确设置状态变量。

使用AWS Amplify加载graphQL数据。似乎可以成功使用局部变量，但不能成功处理状态变量。

const [serviceTypes, setServiceTypes] = useState([{}]);
let myServiceTypes = [{}]; // try it with a local variable to debug

useEffect(() => {
  let unmounted = false;

  async function fetchData() {
    const result = await API.graphql(
      graphqlOperation(queries.listServiceTypes)
    );
    console.log(result);
    console.log('setting service types...');
    console.log(result.data.listServiceTypes.items);
    setServiceTypes(result.data.listServiceTypes.items);
    myServiceTypes = result.data.listServiceTypes.items;
    console.log(myServiceTypes); // set correctly
   console.log(serviceTypes); // empty
  }
  if (!unmounted) {
    fetchData();
  }
  return () => {
    unmounted = true;
  };
}, []);

期望将serviceTypes设置为加载的数据。相反，它是空的。

Answer 1

setState不能像这样同步工作。您不能期望serviceTypes变量在设置后立即包含数据。重新渲染组件时将对其进行更新。尝试将console.log(serviceTypes);移到useEffect之外。

有关https://stackoverflow.com/a/36087156/5273790的setState异步说明。

Answer 2

这是因为您没有考虑效果并正确渲染。

安装/渲染1

fetchData被称为
setServiceTypes并将服务类型传递到下一个呈现器
serviceTypes为空

渲染2

useEffect不被调用
serviceTypes是以前的serviceTypes设置的

尝试在渲染/返回之前注销serviceTypes

设置数据加载后的使用状态

2 个答案: