在事件处理程序中调用自定义挂钩

Question

我有一个名为useFetchMyApi包装对 API 端点的 fetch 调用的自定义挂钩。函数钩子接受一个参数，并将其包含在帖子正文中。数据数组输出取决于钩子参数。

在UI上，App组件调用useFetchMyApi一次。随后将调用按钮单击处理程序useFetchMyApi来更新 UI 上的列表。

我的问题：

1. 我无法调用useFetchMyApi事件处理程序，因为它违反了挂钩规则。
2. 如何根据 的响应刷新项目列表useFetchMyApi？

import React, { useState, useEffect, useRef } from "react";
import "./styles.css";

const useFetchMyApi = (location = "") => {
  const [items, setItems] = useState([]);
  useEffect(() => {
    // let's stimulate the API call with a 2 seconds response time
    setTimeout(() => setItems([location, Math.random()]), 5000);
  }, [location]);
  return { items };
};

export default function App() {
  const locationSelect = useRef(null);
  const { items } = useFetchMyApi("mylocation1");
  const onButtonClicked = (event) => {
    const selectedLocation = locationSelect.current.value;
    // Call api and refresh items by location
    // Fix here??
    //useFetchMyApi(selectedLocation);
  };

  return (
    <div className="App">
      <select ref={locationSelect}>
        <option value="location1">Location 1</option>
        <option value="location2">Location 2</option>
      </select>
      <button onClick={onButtonClicked}>Refresh</button>
      <ul>
        {items.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
    </div>
  );
}

https://codesandbox.io/s/stupefied-water-1o6mz?file=/src/App.js:0-1055

Answer 1

问题

1. 我无法调用useFetchMyApi事件处理程序，因为它违反了挂钩规则。

正确的，react hooks只能从功能组件和其他react hooks的主体中调用。它们不能有条件地调用，例如在异步回调或循环中。

2. 如何根据 的响应刷新项目列表useFetchMyApi？

您没有任何东西App可以触发重新渲染来触发效果，从而触发效果的回调。

解决方案

您应该利用useEffect自定义挂钩中挂钩的依赖关系useFetchMyApi来刷新项目列表。添加一些本地组件状态来表示“当前”选定的位置。使用按钮的onClick回调来更新状态并触发重新渲染，然后重新运行您的自定义挂钩。

const useFetchMyApi = (location = "") => {
  const [items, setItems] = useState([]);
  useEffect(() => {
    // let's stimulate the API call with a 2 seconds response time
    setTimeout(() => setItems([location, Math.random()]), 2000);
  }, [location]); // <-- effect callback triggers when location updates
  return { items };
};

function App() {
  const locationSelect = useRef(null);
  const [location, setLocation] = useState("mylocation1"); // <-- add state
  const { items } = useFetchMyApi(location); // <-- pass location value to hook

  const onButtonClicked = () => {
    const selectedLocation = locationSelect.current.value;
    setLocation(selectedLocation); // <-- update state, trigger rerender
  };

  return (
    <div className="App">
      <select ref={locationSelect}>
        <option value="location1">Location 1</option>
        <option value="location2">Location 2</option>
      </select>
      <button onClick={onButtonClicked}>Refresh</button>
      <ul>
        {items.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
    </div>
  );
}

替代解决方案

另一种解决方案是重写您的自定义useFetchMyApi挂钩，以返回一个回调，以便在单击处理程序中按需调用以执行获取和更新列表。这是一个简单的转换。请注意，现在返回的 fetch 函数消耗该位置，而不是挂钩调用。

const useFetchMyApi = () => {
  const [items, setItems] = useState([]);

  // custom fetch function consumes location
  const locationFetch = (location = "") => {
    // let's stimulate the API call with a 2 seconds response time
    setTimeout(() => setItems([location, Math.random()]), 2000);
  };
  
  return [items, locationFetch]; // <-- return state and fetch function
};

export default function App() {
  const locationSelect = useRef(null);
  const [items, locationFetch] = useFetchMyApi(); // <-- destructure state and fetch function

  useEffect(() => {
    locationFetch("mylocation1");
  }, []); // <-- initial mounting fetch call

  const onButtonClicked = () => {
    const selectedLocation = locationSelect.current.value;
    locationFetch(selectedLocation); // <-- invoke fetch function
  };

  return (
    <div className="App">
      <select ref={locationSelect}>
        <option value="location1">Location 1</option>
        <option value="location2">Location 2</option>
      </select>
      <button onClick={onButtonClicked}>Refresh</button>
      <ul>
        {items.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
    </div>
  );
}