[英]Stop react causing an infinite loop using useEffect hook
我对反应和节点非常陌生,我已经设法为简单的待办事项列表创建了一个 API。 我已从 api 获取数据并将其呈现在屏幕上。
如果我在useEffect()
钩子上将依赖项数组留空,它只会渲染一次并且不会循环。 但是如果我添加一个新的 Todo,它不会更新列表,除非我刷新。 因此,我将待办事项 state 放入依赖项数组中,当我添加它时,这将显示新项目,但是如果我查看开发工具中的网络选项卡,它会在无限循环中命中 api。 我究竟做错了什么?
这是代码:
应用程序
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;
标题
import React from "react";
const Heading = ({ todos }) => (
<header>
<h1>Todos</h1>
<p>
{todos.length} {todos.length === 1 ? "Item" : "Items"}
</p>
</header>
);
export default Heading;
去做
import React, { useState } from "react";
const Todo = ({ todo }) => (
<li>
{todo.name}
<input type="checkbox" />
</li>
);
export default Todo;
新待办事项表格
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;
如果我将所有组件注释掉并且只有 App 组件,当我将 todos 添加到useEffect()
挂钩的依赖项数组时,它仍然是无限循环。
因此,与其将其作为依赖项,不如将useEffect
写入 useEffect 之外,以便在添加待办事项后调用 function
例子:
const getTodos = async () => {
const res = await fetch("http://localhost:3001/api/todos");
const data = await res.json();
setTodos(data);
};
useEffect(() => {
getTodos();
}, []);
因此getTodos
最初只会运行一次,并且只会在Todo
的onSubmit
或onClick
上再次运行,因此,只需调用getTodos
function onSubmit 或 ZB73CAB20CE55A0033CA6F07A5Z78
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.