javascript - React console.log showing duplicate results in Dev Tools - Stack Overflow

admin管理员组

文章数量:1430597

Why does React show duplicate console.log? I found that to remove StrictMode from index.js. but there was no such problem before and why did I remove StrictMode instead of fixing the issue. What other issues could there be?

see the screenshort:

import React, { useEffect, useState } from "react";
import Country from "../Country/Country.js";

const gridStyle = {
  display: "grid",
  gridTemplateColumns: "repeat(4, 1fr)",
  gridGap: "20px",
};

const Countries = () => {
  const [countries, setCountries] = useState([]);
  useEffect(() => {
    fetch(".1/all")
      .then((res) => res.json())
      .then((data) => setCountries(data));
  }, []);
  console.log(countries);
  return (
    <div className="all-countries">
      <p>{countries.length}</p>
      <div style={gridStyle} className="country-container">
        {countries.map((country) => (
          <Country key={Math.random() * 500000} country={country}></Country>
        ))}
      </div>
    </div>
  );
};

export default Countries;

Why does React show duplicate console.log? I found that to remove StrictMode from index.js. but there was no such problem before and why did I remove StrictMode instead of fixing the issue. What other issues could there be?

see the screenshort: https://prnt.sc/HLAmthr9efoB

import React, { useEffect, useState } from "react";
import Country from "../Country/Country.js";

const gridStyle = {
  display: "grid",
  gridTemplateColumns: "repeat(4, 1fr)",
  gridGap: "20px",
};

const Countries = () => {
  const [countries, setCountries] = useState([]);
  useEffect(() => {
    fetch("https://restcountries./v3.1/all")
      .then((res) => res.json())
      .then((data) => setCountries(data));
  }, []);
  console.log(countries);
  return (
    <div className="all-countries">
      <p>{countries.length}</p>
      <div style={gridStyle} className="country-container">
        {countries.map((country) => (
          <Country key={Math.random() * 500000} country={country}></Country>
        ))}
      </div>
    </div>
  );
};

export default Countries;

• javascript
• reactjs
• react-hooks
• jsx
• use-state

Share Improve this question Follow edited May 13, 2022 at 13:29 Amit 1,17322 gold badges1111 silver badges2525 bronze badges asked May 13, 2022 at 6:37 Shamim RezaShamim Reza 8122 silver badges1010 bronze badges 6

• 1 Your ponent might be rendered multiple times. – mc-user Commented May 13, 2022 at 6:40
• 2 Can you please provide some code ? Please check stackoverflow./help/minimal-reproducible-example – RenaudC5 Commented May 13, 2022 at 6:40
• Please provide enough code so others can better understand or reproduce the problem. – Community Bot Commented May 13, 2022 at 8:49
• edited the post with codes – Shamim Reza Commented May 13, 2022 at 10:10
• thats mon, react will call your ponent on every render (in development it happens twice for ensuring) thus console.log() will be executed multiple times. – bogdanoff Commented May 13, 2022 at 10:14

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 6

Regarding the React.StrictMode issue, the solution may be in your ponent, which renders twice and could be wrapped in React.StrictMode. You can either ment out or clean up the React.StrictMode. I hope this fixes the issue.

• In StrictMode, ponents are rendered twice during development (but not in production) to identify issues in your code and provide warnings, which can be very helpful.

• If StrictMode is enabled in your code, it might be due to using create-react-app or similar to create your app initially, which automatically enables StrictMode by default.

Most probably you write console.log() outside of function that trigger the log,
so will be fired every time the ponent is re-rendered.

本文标签： javascriptReact consolelog showing duplicate results in Dev ToolsStack Overflow