如何更改从自定义挂钩接收到的数据？

Question

我刚刚进入自定义挂钩，我创建了一个自定义挂钩，从 API.

中获取数据

interface DataProps<Type> {
  results: Type[];
  isLoading: boolean;
  LIMIT: number;
  offset: number;
}

interface Pokemon {
  name: string;
  url: string;
}

const useGetData = (url: string) => {
  const [data, setData] = useState<DataProps<Pokemon>>({
    results: [],
    isLoading: true,
    LIMIT: 80,
    offset: 0
  });

  const fetchData = async () => {
    const res = await fetch(
      url +
        new URLSearchParams({
          limit: data.LIMIT + "",
          offset: data.offset + ""
        })
    );
    const { results } = await res.json();
    setData((prevValue) => ({
      ...prevValue,
      results: [...prevValue.results, ...results],
      isLoading: false,
      offset: prevValue.offset + prevValue.LIMIT
    }));
  };

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

  return data;
};

在我的 App 组件中，我是这样使用的：

export default function App() {
  let data = useGetData(
    `https://pokeapi.co/api/v2/pokemon?`
  );

  return (
    <div className="App">
      {data.isLoading && <div>Loading...</div>}
      <ul>
        {data.results.map((pokemon) => (
          <li key={pokemon.name}>{pokemon.name}</li>
        ))}
      </ul>
    </div>
  );
}

效果很好，但这仅用于展示目的。例如，我想从结果数组中删除一个元素。既然我没有 setData() 来做到这一点，我该如何实现呢？据我所知，当您希望状态更改生成重新渲染时，不使用 set...() 改变状态是不好的（就像在我的例子中，我希望删除操作从屏幕上删除所选元素）。

Answer 1

在你的钩子而不是 return data 采用 return [data, setData]

然后在你的组件中而不是

let data = useGetData('https://pokeapi.co/api/v2/pokemon?');

做

const [data, setData] = useGetData('https://pokeapi.co/api/v2/pokemon?');

您现在可以访问组件中的 setter 并可以操纵状态。

如何更改从自定义挂钩接收到的数据？

How to change the data received from a custom hook?

reactjs

react-hooks

react-custom-hooks