我刚开始在后端使用react和绑定(bind),但在发出提取请求后,我必须重新加载页面才能看到任何变化。一旦函数被调用,数据库就会更新,但组件不会重新渲染。我知道 setState 异步工作,所以我尝试在 setState 的回调中调用我的函数,但那没有用。
这发生在我的 handleSubmit
和 handleDelete
函数上。我最初的 get 请求在我的 componentDidMount 中,所以我将其包括在内以防它有帮助。
我在网站上找不到我需要的答案,也许推荐刚刚结束,但我在这里,大声笑。提前致谢。
componentDidMount() {
// todos is the data we get back
// setting the state to newly aquired data
fetch("/api/todos")`enter code here`
.then(res => res.json())
.then(todos => this.setState({ todos }, () =>
console.log("Todos fetched...", todos)))
.catch(err => console.log(err))
}
// onClick for submit button
handleSubmit = (e) => {
e.preventDefault();
const data = this.state;
fetch("/api/todos", {
method: "post",
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
})
};
// onClick for delete button
handleDelete = (e) => {
e.preventDefault();
let uniqueId = e.target.getAttribute("id")
fetch(`/api/todos/${uniqueId}`, {
method: "delete",
headers: { 'Content-Type': 'application/json' }
})
};
// Some of the JSX if needed
<DeleteBtn
id={todo._id}
onClick={this.handleDelete}
>X</DeleteBtn>
<Form onSubmit={this.handleSubmit} id="myForm"></Form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
我正在寻找的结果是,一旦我添加了一个待办事项,它就会立即呈现在我的列表中,而不是仅在页面重新加载时呈现。
最佳答案
在请求中从后端返回详细信息,使用该值更新状态,
目前你只是在后台执行操作,前台并不知道它发生在后台。 最好的方法是在对数据库执行操作后将完整数据(列表或对象)传递回前端并将值链接到状态, 如果数据很大,则从后端向前端发送一条成功消息(200 条就足够了),如果成功则更改前端的值(列表), 将值(列表)链接到前端的状态以重新呈现组件。
关于javascript - 获取请求和状态更改后如何重新渲染组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57872816/