useEffect会持续触发GET请求

Question

我正在学习React，并尝试自己做一个小项目，但是我在useEffect方面遇到了困难。

我尝试使用来自后端的信息自动填充表单。我可以自动填充表单，但它会不断发送GET请求。这是我的代码：

  useEffect(() => {
      axios
        .get('/admin/edit-product' + location.search)
        .then((res) => {
          const updatedControls = {
            ...controlsState,
            title: {
              ...controlsState.title,
              value: res.data.title,
            },
            image: {
              ...controlsState.image,
              value: res.data.image,
            },
            price: {
              ...controlsState.price,
              value: res.data.price,
            },
            description: {
              ...controlsState.description,
              value: res.data.description,
            },
          };
          setControlsState(updatedControls);
        })
        .catch((err) => console.error(err));
  }, [controlsState, location.search]);

我原以为依赖数组可以阻止它不停地运行，但我想我还需要了解其他内容。

不确定是否需要，这是我的原始状态：

  const [controlsState, setControlsState] = useState({
    title: {
      elementType: 'input',
      elementConfig: {
        type: 'text',
      },
      label: 'Product Title: ',
      value: '',
    },
    image: {
      elementType: 'input',
      elementConfig: {
        type: 'url',
      },
      label: 'Image URL: ',
      value: '',
    },
    price: {
      elementType: 'input',
      elementConfig: {
        type: 'number',
      },
      label: 'Price: ',
      value: '',
    },
    description: {
      elementType: 'textarea',
      elementConfig: {
        name: 'description',
        htmlFor: 'description',
      },
      label: 'Description: ',
      value: '',
    },
  });

同时 location 是从 react-router-dom 的 useLocation 中获取的

- walrisus

Answer 1

你在useEffect中将controlsState作为依赖项。但是在useEffect内部，您正在使用setControlsState更改controlsState的值。由于您已将controlsState作为依赖项给出，每当其任何依赖项发生更改时，useEffect都会发生变化。因此它会反复发生。

如果您希望useEffect仅运行一次，请将[]作为第二个参数提供：

useEffect(() => { 
    ...your code... 
}, [])

- Rishi Desai

---

这个方法可以运行（之前我尝试过一次，但是由于某些原因它当时没有运行），但现在在控制台中会出现一个警告：“React Hook useEffect缺少依赖项：'controlsState'和'location.search'。请包括它们或删除依赖项数组”。是否可以忽略这个警告？ - walrisus

如果您想要仅在挂载和卸载时运行一次效果并清理它，可以将一个空数组（[]）作为第二个参数传递。这告诉React您的效果不依赖于任何来自props或state的值，因此它永远不需要重新运行。这不是作为特殊情况处理的 - 它直接遵循依赖项数组的工作方式。 - Konstantin Skrypak

你可以忽略警告。 - Konstantin Skrypak