Question

我正在关注有关使用jsonplaceholder的待办事项列表的反应教程。在其中，我们需要向https://jsonplaceholder.typicode.com/todos发出get请求，并且我们有以下代码：

  const [todos, setTodos] = useState([]);
  useEffect(
   () => {
    Axios.get('https://jsonplaceholder.typicode.com/todos?_limit=10')
    .then(({data}) => {
      setTodos(data);
    });
  }, []);

根据我所读的内容，效果意味着函数会在其范围之外更改某些内容，而不仅仅是返回一个值，并且使用相同的参数可以给出不同的结果。至少这就是我对副作用的理解。但是它如何在这种情况下适用？ axios.get会更改任何内容，还是通过不同的调用返回不同的值？我知道向第三方提出请求总是有效果的，但是这如何起作用？同时我有addTodo函数：

  const addTodo = (title) => {
    Axios.post("https://jsonplaceholder.typicode.com/todos", {
      title: title,
      completed: false
    }).then(({data}) => setTodos([...todos, data]));
  }

为什么这不需要useEffect钩子。似乎addTodo更改了todos状态的值，不是吗？为什么这次没有useEffect（）。如果有太多问题，感谢您的阅读和道歉。我认为不需要单独询问他们。

Answer 1

这与axios无关，也与您要执行代码的所有事情无关。只是为了澄清，axios完全不需要 useEffect。

useEffect是一个挂钩，可让您在安装组件后执行操作。将代码放在这里可能很有意义，例如，您可能只需要运行一次加载一些数据，连接事件处理程序，更新DOM等。在您的示例中，您在此处加载Todo列表，这很有意义，因为您可能只需要执行一次。

对于不需要{em> 立即运行的代码（例如addTodo），那么您可以在例如只需单击按钮，计时器，就对您的应用程序有意义。

注意-useEffect可以使用dependencies多次触发，但这对本示例而言并不重要

为什么axios.get有副作用，而axios.post却没有一个？

1 个答案: