[英]Stop react causing an infinite loop using useEffect hook
I am very new to react and node, I have managed to create an API for a simple todo list.我对反应和节点非常陌生,我已经设法为简单的待办事项列表创建了一个 API。 I have fetched the data from the api and presenting it on the screen.
我已从 api 获取数据并将其呈现在屏幕上。
If I leave the dependency array empty on the useEffect()
hook it will only render once and doesn't loop.如果我在
useEffect()
钩子上将依赖项数组留空,它只会渲染一次并且不会循环。 But If I add a new Todo it will not update the list unless I refresh.但是如果我添加一个新的 Todo,它不会更新列表,除非我刷新。 So I put the todos state into the dependency array, this will then show the new item when I add it but if I look at the network tab in the dev tools its hitting the api in an infinite loop.
因此,我将待办事项 state 放入依赖项数组中,当我添加它时,这将显示新项目,但是如果我查看开发工具中的网络选项卡,它会在无限循环中命中 api。 What am I doing wrong?
我究竟做错了什么?
here is the code:这是代码:
App应用程序
import React, { useState, useEffect } from "react";
import Todo from "./components/Todo";
import Heading from "./components/Heading";
import NewTodoForm from "./components/NewTodoForm";
const App = () => {
const [todos, setTodos] = useState([]);
useEffect(() => {
const getTodos = async () => {
const res = await fetch("http://localhost:3001/api/todos");
const data = await res.json();
setTodos(data);
};
getTodos();
}, []);
return (
<div className="container">
<Heading todos={todos} />
<section className="todos-container">
<ul className="todos">
{todos.map((todo) => (
<Todo key={todo._id} todo={todo} />
))}
</ul>
</section>
<section className="todo-form">
<NewTodoForm />
</section>
</div>
);
};
export default App;
Heading标题
import React from "react";
const Heading = ({ todos }) => (
<header>
<h1>Todos</h1>
<p>
{todos.length} {todos.length === 1 ? "Item" : "Items"}
</p>
</header>
);
export default Heading;
Todo去做
import React, { useState } from "react";
const Todo = ({ todo }) => (
<li>
{todo.name}
<input type="checkbox" />
</li>
);
export default Todo;
NewTodoForm新待办事项表格
import React, { useState } from "react";
import { Plus } from "react-feather";
const NewTodoForm = () => {
const [formData, setFormData] = useState({
name: "",
completed: false,
});
const { name } = formData;
const handleOnChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value,
});
};
const handleSubmit = async (e) => {
e.preventDefault();
await fetch("http://localhost:3001/api/todos", {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify(formData),
});
setFormData({
name: "",
completed: false,
});
};
return (
<form onSubmit={handleSubmit}>
<div className="form-control">
<Plus className="plus" />
<input
name="name"
type="text"
placeholder="Add New Item"
onChange={handleOnChange}
value={name}
/>
<button>Add</button>
</div>
</form>
);
};
export default NewTodoForm;
If I comment all the components out and only have the App component it still infinite loops when I add todos to the dependency array of the useEffect()
hook.如果我将所有组件注释掉并且只有 App 组件,当我将 todos 添加到
useEffect()
挂钩的依赖项数组时,它仍然是无限循环。
So instead of giving that as a dependency write the function outside the useEffect
so that you can call that function after you add a todo因此,与其将其作为依赖项,不如将
useEffect
写入 useEffect 之外,以便在添加待办事项后调用 function
Example:例子:
const getTodos = async () => {
const res = await fetch("http://localhost:3001/api/todos");
const data = await res.json();
setTodos(data);
};
useEffect(() => {
getTodos();
}, []);
So getTodos
will only run once initially and runs again only on the onSubmit
or onClick
of your Todo
, So, just call getTodos
function onSubmit or onClick因此
getTodos
最初只会运行一次,并且只会在Todo
的onSubmit
或onClick
上再次运行,因此,只需调用getTodos
function onSubmit 或 ZB73CAB20CE55A0033CA6F07A5Z78
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.