时间戳

首页 > 解决方案 > Reactjs useState 挂钩未更新承诺数据

reactjs - Reactjs useState 挂钩未更新承诺数据

问题描述

我使用的是反应钩子而不是基于类的组件，但是当我从 graphql API 获取数据时它没有更新状态。

在这里你去我的代码：

import React, { useEffect, useState } from 'react';
import client from '../gqlClient';
import { gql, ApolloClient, InMemoryCache  } from '@apollo/client';


const client = new ApolloClient({
  uri: 'http://localhost:8000/graphql/',
  cache: new InMemoryCache(),
});


function EmpTable() {

  const [employee, setEmployee] = useState({});

    useEffect(() => {

        client
            .query({
                query: gql`
                query {
                  employees {
                    name
                  }
                }
                `
            })
            .then(result => {
              setEmployee({result});
              console.log(employee);
            });
    }, [])

    return (
        <div>return something</div>
    )
};


export default EmpTable;

当我打印employee它时，它只打印初始值。

但是当打印结果时，控制台会显示我从 API 获得的所有数据。

我使 useEffect 仅在加载页面/组件后运行，但它不起作用。

谁能帮我解决这个问题？

标签： reactjsreact-hooksapollo-clientuse-effectuse-state

解决方案

setEmployee是异步方法，因此您无法employee立即获取 after的更新值setEmployee。

setEmployee({result});
console.log(employee); // This will show the old `employee` value.

您应该在useEffect添加employee依赖项的情况下获得更新的结果。

useEffect(() => {
        client
            .query({
                query: gql`
                query {
                  employees {
                    name
                  }
                }
                `
            })
            .then(result => {
              setEmployee({result});
              console.log(employee);
            });
}, [])

useEffect(() => {
  console.log(employee);
}, [employee]);

推荐阅读