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

Question

我正试图将一个值从一个定制钩子（为服务器获取数据）保存到带有useState的功能组件状态，因为我以后需要更改这个值，更改后需要重新加载。因此，理想的行为是：

1. 将状态变量设置为自定义挂钩中的值

我尝试的是：

>

设置useState的初始值到我的钩子：const[data， setData]=useState

在useffect（）挂钩中设置状态：

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])

导致：错误：超出最大更新深度。这可能发生在一个组件在use效应中调用setState时，但是use效应要么没有依赖数组，要么其中一个依赖关系在每次渲染时都会更改。

对于我的用例来说，什么是合适的解决方案？




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链接

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

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

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

codesandbox.io链接

完整示例：

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