向后端发出请求并使用结果设置状态会创建无限循环 - React hooks useEffect

Question

当用户进入编辑页面时，他们将获得正在编辑的任务的 ID。我需要向后端发出请求并使用任务文本设置一次状态。

我的工作：

let { id } = useParams();
const [task, setTask] = useState({ text: "", id: id });

useEffect(() => {
  axios
    .get(`/find/${id}`)
    .then((res) => {
      setTask({ ...task, text: res.data.text });
    })
    .catch((err) => console.log(err));
  // eslint-disable-next-line
  }, [])

如果我删除 // eslint-disable-next-line，我会收到一条错误消息，告诉我添加任务和 ID 作为依赖项，但是当我这样做时，我陷入了无限循环。

有没有一种方法可以向后端发出请求并设置一次状态，而不必隐藏 eslint 错误。

Answer 1

循环是无限的原因是因为当您使用 spread 参数调用 setTask 时，您使用的是 useState 中的 task。

为防止这种情况，请在 useEffect 中调用 setTask(task => ({ ...task, text: res.data.text }));，以便它使用范围内的当前 task 来计算新任务状态。然后你将能够将 [task, id] 作为挂钩依赖项。

Answer 2

我能够通过 props 传递更新方法并将该方法添加为依赖项来使其工作：

useEffect(() => {
const updateEditText = props.updateEditText;

axios
  .get(`/find/${id}`)
  .then((res) => {
    updateEditText({ id: id, editText: res.data.text });
  })
  .catch((err) => console.log(err));

}, [id, props.updateEditText]);

向后端发出请求并使用结果设置状态会创建无限循环 - React hooks useEffect

Making a request to back end and setting state with results creates infinite loop - react hooks useEffect

infinite-loop

reactjs

react-hooks