提取数据后如何设置状态React钩子

Question

代码：

结果：状态中没有数据


帮帮我，谢谢！

Answer 1

setState是异步的，这就是为什么您将书籍视为空数组。这是React docs的引文：

setState函数用于更新状态。它接受一个新的 状态值并入队重新渲染组件。

您可能做错的一件事是在useEffect回调中。如果您的效果返回了一个函数，React将在需要清理时运行它。而且您不希望在清理过程中调用setState中的fetchData函数，因为可能会卸载该组件。

如果只希望fetchData在组件安装后仅运行一次，则可以采用以下解决方案：

useEffect(() => {
  // put the fetchData inside the effect
  async function fetchData() {
    setLoading(true);
    const name = await getNameGroup();
    const tmp = await getAll(name);
    console.log(tmp);
    setBooks(tmp);
    console.log(books); // may not be the same as tmp, but you will see the updated state in the next render
    setLoading(false);
  }
  fetchData();
},[]}

您应该详细了解React docs中的useEffect钩子。

Answer 2

const [dataArray, setDataArray] = useState([]);

async function fetchData() {
    try {
        setIsLoading(true);
        const response = await getNameGroup();
        setDataArray(response);
    } catch(error) {
       // handle error
    } finally {
       setIsLoading(false);
    }
}

Answer 3

这是一个过时的关闭问题。

正在调用useEffect的{​​{1}}的依赖数组为空。在fetchData内的fetchData函数中，您尝试打印useEffect，其中第一个加载是使用空数组初始化的。

所有钩子对初始化它们的变量都具有相同的引用，直到依赖关系更改为止。为了获得更新状态，它们依赖于依赖项数组。由于您的依赖项数组未指定books，因此它也不会刷新books函数中books的引用。详细了解过时的关闭问题here

这就是为什么您的fetchData s变量显示陈旧数据的原因。

book

Answer 4

这是一个有效的示例代码，您可以应用：

const [data, setData] = useState([]); 
const [hasError, setErrors] = useState(false);

async function fetchData() {
const LibraryQuery = JSON.stringify({query: `query { species { id name description } }`});
const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
const res = await fetch('http://localhost:3000/graphql',{
    method: 'POST',
    headers: {
    'Content-Type': 'application/json',
    'X-CSRF-Token': token
    },
    body: LibraryQuery
});
res
    .json()
    .then(res => setData(res.data))
    .catch(err => setErrors(err));
}

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