Javascript 如何弥补1个州的差距？

我正在练习将状态发送到子组件-父组件-另一个子组件

我一直坚持练习

首先，我成功地做出了这样的反应

其次，我想将计数器值发送到另一个组件。 我知道如何将状态发送到另一个子组件。 但我坚持我的工作

当我第一次单击+按钮时，它只对第一个孩子起作用。 然后，当我再次单击时，另一个孩子也可以使用它（不匹配号码）

我如何处理这个问题

这是我的密码

// This is Counter.js

class Counter extends Component {
    state = {
        counter: 0
    }

    handleIncrement = () => {
        this.setState(({ counter }) => ({
            counter: counter + 1
        }))
        this.props.handleCounter(this.state.counter)
    }

    handleDecrement = () => {
        this.setState(({counter}) => ({
            counter: counter - 1
        }))
        this.props.handleCounter(this.state.counter)
    }

    render() {
        return (
            <div>
                <h1>Counter</h1>
                <h3>{this.state.counter}</h3>
                <button onClick={this.handleIncrement}>+</button>
                <button onClick={this.handleDecrement}>-</button>
            </div>
        )
    }
}

//这是Counter.js
类计数器扩展组件{
状态={
柜台:0
}
handleIncrement=（）=>{
this.setState（（{counter}）=>({
柜台：柜台+1
}))
this.props.handleCounter（this.state.counter）
}
handleDecrement=（）=>{
this.setState（（{counter}）=>({
柜台：柜台-1
}))
this.props.handleCounter（this.state.counter）
}
render（）{
返回(
柜台
{this.state.counter}
+
-
)
}
}

//这是App.js文件
从“./组件/计数器”导入计数器；
从“./components/Sent”导入发送的
类应用程序扩展了React.Component{
状态={
柜台：这是手提式计数器
}
handleCounter=（计数器）=>{
console.log（“接收计数1”）
这是我的国家({
柜台：柜台
})
}
render（）{
返回(
);
}
}

//这是Sent.js文件
从“React”导入React，{Component}
类发送到React.Component{
render（）{
返回(
结果==>{this.props.Result}
)
}
}

setState（）

是异步的。在

setState（）

回调之外发生的

this.props.handleCounter（this.state.counter）

等操作可能会有旧的state值。这是否回答了您的问题？

// This is App.js file

import Counter from './components/counter';
import Sent from './components/sent'

class App extends React.Component {

  state = {
    counter: this.handleCounter
  }

  handleCounter = (counter) => {
    console.log("Received Count 1 ")
    this.setState({
      counter: counter
    })
  }

  render() {
    return (
      <div className="App">
        <Counter handleCounter={this.handleCounter} />
        <Sent result={this.state.counter} />
      </div>
    );
  }

}

// This is Sent.js file 
import React, { Component } from 'react'

class Sent extends React.Component {

    render() {
        return (
            <div>
                <h2>Result ==> {this.props.result}</h2>
            </div>
        )
    }
}