英文:
Did someone knows why the componentDidMount method its running 2 times?
问题
有人知道为什么componentDidMount方法运行两次吗？
当我调用componentDidMount方法时，我会看到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;
我不知道为什么它运行两次，它应该只运行一次。我尝试从数据库中获取所有客户端，但它运行两次。如果有人可以帮助我，我将不胜感激，因为我已经被这个问题困扰了很长时间。
英文:
Someones knows why the componentDidMount runs 2 times?
I get this console.log() printed 2 times when I call the component did mount method
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;
I dont know why its running 2 times, it should run only one time.
Im tryng to fetch all clients from my db but its doing it 2 times.
If somone can help me I will be grateful since I have been stuck with this for quite a while
答案1
得分: 0
我刚刚意识到，当在"Strict Mode"下运行时，组件会运行两次。
我刚刚修改了我的index.js文件。
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
当我移除<React.StrictMode>时，一切都运行得很完美！
英文:
I just realized that compontents run twice when running on Strict Mode.
I just change my index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
and when I remove the <React.StricMode> works perfectly!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论