有人知道为什么组件DidMount运行2次吗?
当我调用组件did mount方法时,这个console.log()被打印了两次
import React, { Component } from "react";
import ClientsTable from "../components/Table/ClientsTable";
import CreateClientModal from "../components/Modal/CreateClientModal";
import AuthContext from "../context/auth-context";
class Clients extends Component {
static contextType = AuthContext;
state = {
clients: [],
};
componentDidMount() {
this.fetchClients();
}
fetchClients() {
let requestBody = {
query: `
query{
users{
_id
name
}
}
`,
};
fetch("http://localhost:8000/api", {
method: "POST",
body: JSON.stringify(requestBody),
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + this.context.token,
},
})
.then((res) => {
if (res.status !== 200) {
throw new Error("Failed");
}
return res.json();
})
.then((resData) => {
const clients = resData.data.users;
this.setState({ clients: clients });
console.log(resData);
})
.catch((err) => {
console.log(err);
});
}
render() {
const clientsList = this.state.clients;
const authData = {
token: this.context.token,
userId: this.context.userId,
companyId: this.context.companyId,
};
return (
<div>
<h1>Clients Page</h1>
<CreateClientModal authData={authData} />
<ClientsTable value={clientsList} />
</div>
);
}
}
export default Clients;
我不知道为什么它运行了两次,它应该只运行一次。我试图从我的数据库中获取所有客户端,但它做了两次。
如果有人能帮助我,我将不胜感激,因为我已经坚持了相当长的一段时间
1条答案
按热度按时间mnemlml81#
我刚刚意识到组件在严格模式下运行时会运行两次。
当我完美地删除<React.StricMode>作品!