Javascript 将数据从子组件传递到父组件

我正在阅读一篇关于媒体的教程，其中解释了如何将数据从子组件传递到父组件（）。该教程获得了5.5k的好评，这意味着许多人一定在自己的工作中使用过它作为参考。然而，在复制代码1:1时，我完全无法获得相同的结果。事实上，数据根本没有从子对象传递到父对象。另外，当我强迫数据传递时，我得到了一个无限循环。如果有人能指出我错在哪里，或者事实上，这毕竟是教程，我将不胜感激

JS小提琴到我的代码：

类ToDoItem扩展了React.Component{
someFn=（）=>{
让listInfo='嗨，妈妈'
this.props.callBackFromParent（listInfo）；
}
render（）{return Hello World}
};
类ToDoList扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
listDataFromChild:null
}
}
myCallback=（dataFromChild）=>{
this.setState（{listDataFromChild:dataFromChild}）
}
其他fn=（）=>{
console.log（this.state.listDataFromChild，'from state'）
}
render（）{
this.otherFn（）；//调用otherFn以确定this.state.listDataFromChild的值
返回(
来自孩子的信息是：
)
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);

这个.someFn（）
的ToDoItem

永远不会执行

尝试：

永不会调用ToDoItem的this.someFn（）

，它调用ToDoList组件的回调方法。单击按钮即可调用此处的

this.someFn（）

    class ToDoItem extends React.Component {
      someFn = () => {
        let listInfo = 'Hi mom'
        this.props.callBackFromParent(listInfo);
      }
       componentDidMount() {
          this.someFn()
  }
  render(){return <h3>Hello World</h3>}
};

类ToDoItem扩展了React.Component{
someFn=（）=>{
让listInfo='嗨，妈妈'
this.props.callBackFromParent（listInfo）；
}
componentDidMount（）{
这个。someFn（）
}
render（）{return Hello World}
};

来自子级的数据可以被视为

  render(){
        return (
          <div>
            <h2>Message from Child is:{this.state.listDataFromChild}</h2>

            <ToDoItem 
              callBackFromParent={this.myCallback}
            />  
          </div>
        )
      }

render（）{
返回(
来自子级的消息为：{this.state.listDataFromChild}
)
}

明白了，但是如果我不想将

ToDoItem的呈现附加到事件上怎么办？换句话说，必须发生事件才能将某些数据从子级传递到父级？如果不想绑定事件，可以调用componentDidMount上的回调方法。明白了吗？但是如果我不想将ToDoItem的呈现附加到事件，该怎么办？换句话说，为了将某些数据从子级传递到父级，必须发生事件吗？在这种情况下：您可以利用
生命周期方法
，例如上面的或@MiddleZ，例如@MiddleZ
  render(){
        return (
          <div>
            <h2>Message from Child is:{this.state.listDataFromChild}</h2>

            <ToDoItem 
              callBackFromParent={this.myCallback}
            />  
          </div>
        )
      }