Question

我正在尝试使用 useState 将自定义钩子中的值保存到功能组件状态，该钩子正在为服务器获取数据，因为我稍后需要更改此值，并且在更改后需要重新渲染。所以期望的行为是：

将状态变量设置为来自自定义钩子的值
用这个状态变量渲染东西
修改按钮点击状态
使用新状态重新渲染

我尝试的是：

将 useState 的初始值设置为我的钩子： const [data, setData] = useState<DataType[] | null>(useLoadData(id).data) 但是数据总是空的。
在 useEffect() 钩子中设置状态：
```
useEffect(()=>{
    const d = useLoadData(id).data
    setData(d)
}, [id])
```
但这向我展示了错误警告：错误：钩子调用无效。钩子只能在函数组件的主体内部调用。
这样做：
```
const [data, setData] = useState<DocumentType[]>([])
const dataFromServer = useLoadData(id).data

useEffect(()=>{
  if (dataFromServer){
    setData(dataFromServer)
  }
}, [dataFromServer])
```
导致：错误：超出最大更新深度。当组件在 useEffect 中调用 setState 时可能会发生这种情况，但 useEffect 要么没有依赖项数组，要么每次渲染时依赖项之一发生变化。

适合我的用例的解决方案是什么？

Answer 1

看起来您的自定义钩子每次使用时都会返回一个新数组。

解决方案 1：更改钩子以返回数组的“缓存”实例。

function useLoadData(id) {
  const [data, setData] = useState([]);

  useEffect(() => {
    loadData(id).then(setData);
  }, [id]);

  // good
  return data;

  //bad
  //return data.map(...)

  //bad
  //return data.filter(...)

  //etc
}

codesandbox.io link

解决方案 2：更改钩子以接受 setData 作为参数。

function useLoadData(id, setData) {
  useEffect(() => {
    loadData(id).then(setData);
  }, [id]);
}

这里我告诉钩子在哪里存储数据，以便自定义钩子和组件中的按钮可以写入同一位置。

codesandbox.io link

完整示例：

import React from "react";
import ReactDOM from "react-dom";
import { useState, useEffect } from "react";

// simulates async data loading
function loadData(id) {
  return new Promise((resolve) => setTimeout(resolve, 1000, [id, id, id]));
}

// a specialized 'stateless' version of custom hook
function useLoadData(id, setData) {
  useEffect(() => {
    loadData(id).then(setData);
  }, [id]);
}

function App() {
  const [data, setData] = useState(null);

  useLoadData(123, setData);

  return (
    <div>
      <div>Data: {data == null ? "Loading..." : data.join()}</div>
      <div>
        <button onClick={() => setData([456, 456, 456])}>Change data</button>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("container"));

将值从自定义钩子保存到状态

1 个答案: