Reactjs React Components子组件渲染两次-有办法解决此问题吗？

当我单击“更新关键点”按钮时，每次都会呈现Child1组件，因此如何解决该问题。
注意：单击时，我已经创建了三个组件一个父组件和两个子组件 父组件按钮更新子组件，使child1组件增加显示 多次。所以请尽快解决这个问题

When i click on Update Key button then Child1 component render every time so how can i resolve it.  
Note : I have create three component one parent component and two child component when i click on 
       parent component button to update child component, so child1 component increase to display 
       multiple time. so please resolved this as soon as possible.

import React，{useState}来自“React”；
从“react dom”导入react dom；
类Child1扩展了React.Component{
componentDidMount（）{
控制台日志（“已安装”）；
}
render（）{
控制台日志（“呈现”）；
返回儿童；
}
}
类Child2扩展了React.Component{
componentDidMount（）{
控制台日志（“挂载2”）；
}
render（）{
console.log（“renderd2”）；
返回儿童2；
}
}
类应用程序扩展了React.Component{
状态={
柜台:0,，
计数器2:0
};
onCounter=（）=>this.setState（{counter:this.state.counter+1，counter:this.state.counter+1}）；
render（）{
返回(
更新密钥
);
}
}
render（，document.getElementById（“根”））；

我的第一个回答，我想我理解了这个问题，我使用react挂钩重新编写了它，因为它更易于阅读，并且不需要更改配置，只需确保运行最新版本的react即可

import React, { useState } from "react";
import ReactDOM from "react-dom";

class Child1 extends React.Component {
  componentDidMount() {
    console.log("mounted");
  }
  render() {
    console.log("rendered");
    return <div>Child</div>;
  }
}

class Child2 extends React.Component {
  componentDidMount() {
    console.log("mounted2");
  }
  render() {
    console.log("rendered2");
    return <div>Child2</div>;
  }
}

class App extends React.Component {
  state = {
    counter: 0,
    counter2: 0
  };

onCounter = () => this.setState({ counter: this.state.counter + 1 , counter2: this.state.counter2 + 1 });

  render() {
    return (
      <>
        <Child1 key={this.state.counter} />
        <Child2 key={this.state.counter2} />
        <button onClick={this.onCounter}>Update Key</button>
      </>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

import React，{useState}来自“React”；
从“react dom”导入react dom；
功能儿童1（道具）{
返回子{props.input}；
}
功能儿童2（道具）{
返回子{props.input}；
}
函数App（）{
let[counter，setCounter]=useState（0）；
让[counter2，setCounter2]=useState（1）；
让onCounter=（）=>{
设置计数器（计数器+1）
设置计数器2（计数器2+1）
}
返回(
更新密钥
);
}
render（，document.getElementById（“根”））；

我的第一个回答，我想我理解了这个问题，我使用react挂钩重新编写了它，因为它更易于阅读，并且不需要更改配置，只需确保运行最新版本的react即可

import React, { useState } from "react";
import ReactDOM from "react-dom";

class Child1 extends React.Component {
  componentDidMount() {
    console.log("mounted");
  }
  render() {
    console.log("rendered");
    return <div>Child</div>;
  }
}

class Child2 extends React.Component {
  componentDidMount() {
    console.log("mounted2");
  }
  render() {
    console.log("rendered2");
    return <div>Child2</div>;
  }
}

class App extends React.Component {
  state = {
    counter: 0,
    counter2: 0
  };

onCounter = () => this.setState({ counter: this.state.counter + 1 , counter2: this.state.counter2 + 1 });

  render() {
    return (
      <>
        <Child1 key={this.state.counter} />
        <Child2 key={this.state.counter2} />
        <button onClick={this.onCounter}>Update Key</button>
      </>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

import React，{useState}来自“React”；
从“react dom”导入react dom；
功能儿童1（道具）{
返回子{props.input}；
}
功能儿童2（道具）{
返回子{props.input}；
}
函数App（）{
let[counter，setCounter]=useState（0）；
让[counter2，setCounter2]=useState（1）；
让onCounter=（）=>{
设置计数器（计数器+1）
设置计数器2（计数器2+1）
}
返回(
更新密钥
);
}
render（，document.getElementById（“根”））；

这是因为您的子组件，即

Child1

和

Child2

使用与

键相同的值。
counter
和
counter2
状态都具有相同的值，这会在ReactDOM中产生歧义。在这里，您没有迭代
数组
，因此不需要使用
键
属性。它会很好用的。如果必须使用
键
属性，请确保它们在同一级别上是唯一的

~Prayag
这是因为您的子组件，即
Child1
和
Child2
使用了与
键相同的值。
counter
和
counter2
状态都具有相同的值，这会在ReactDOM中产生歧义。在这里，您没有迭代
数组
，因此不需要使用
键
属性。它会很好用的。如果必须使用
键
属性，请确保它们在同一级别上是唯一的

~Prayag