Question

React 获取数据一次又一次触发

2020-10-08

216

javascript reactjs fetch

有人知道为什么这个提取会继续触发吗？我也尝试过把它放在 useEffect 中，但没有成功。它应该只触发一次，并在 imdbID 加载后返回。

const WatchOnList = ({ imdbId }) => {
  const [locations, setLocations] = useState([])
  var headers = new Headers();
  headers.append("x-api-key", "API_KEY")

  var requestOptions = {
    method: 'GET',
    headers: headers,
    crossDomain: true,
    redirect: 'follow'
  };

  async function fetchData() {
    const res = await fetch(`${awsApiUrl}?imdb_id=${imdbId}`, requestOptions);
    res
      .json()
      .then((res) => {
        setLocations(res)
        console.log(locations)
      })
      .catch(error => console.log('error', error));
  }
  fetchData();

Answer 1

在当前结构下，请求将在每次重新渲染时触发。这在 React 应用中非常常见。 useEffect 是此类函数的正确位置。但也有一些注意事项：

您无法使 useEffect 异步，您必须在钩子内创建一个异步函数并在之后调用它。
useEffect 默认在每次更新时运行，因此您必须明确告诉它只运行一次（如类组件的 componentDidMount ）。这可以通过传递一个空数组作为第二个参数来实现。钩子监视此数组中指定的参数，并且仅在其中一个参数发生变化时更新。由于它是空的，因此它只会在初始化时触发一次。

这应该可以工作：

 useEffect(() => {
    async function fetchData() {
      const res = await fetch(`${awsApiUrl}?imdb_id=${imdbId}`, requestOptions);
      res
        .json()
        .then(res => {
          setLocations(res);
          console.log(locations);
        })
        .catch(error => console.log("error", error));
    }
    fetchData();
  }, []);

阅读此处和此处了解有关钩子行为的更多信息。