Javascript 在将状态和设置状态传递给组件时，如何使状态发生更改？

我这里有一个简单的React.js程序。我想做的是点击一个 姓名以显示此人的年龄。当我尝试在不将状态传递到第1页的情况下更改状态时，效果很好。但是当我尝试传递state和set state函数时，它会给我一些错误，我不太理解，因为我还在学习react，所以我想我从一个简单的例子开始

第1.js页

import React from 'react';

const page1 = props => {
    //wrap in div
    //put in array form
    //make a higher order component
    return (
        <div>
            <h1 onClick = {() => props.showAge()}>Click to show age</h1>
            <h1>{props.age}</h1>
        </div>
    );
};

export default page1;

从“React”导入React；
const page1=props=>{
//包扎
//以数组形式放置
//制作高阶组件
返回(
props.showAge（）}>单击以显示年龄
{props.age}
);
};
导出默认页面1；

这是我的主容器。底部的注释代码有效。当我试图将它传递到第1页时，（我所认为的）等价物没有

pages.js

import React, { Component } from 'react';
import Page1 from './page1';
//import Page2 from './page2';
import './Pages.css';

class Pages extends Component {

  state = {
    age: "joe"
  }

  showAge() {
    this.setState({
      age: "25"
    });
  }

  render() {
    return (
      <div>
        <Page1 
        age = {this.state.age}
        showAge = {this.showAge} />
        {/*<h1 onClick= {() => this.showAge()}}>Click to show age</h1>
        <h1>{this.state.age}</h1>*/}
      </div>
    );
  }
}

export default Pages;

import React，{Component}来自'React'；
从“/Page1”导入第1页；
//从“/Page2”导入第2页；
导入“./Pages.css”；
类页面扩展组件{
状态={
年龄：“乔”
}
展示（）{
这是我的国家({
年龄：“25”
});
}
render（）{
返回(
{/*this.showAge（）}>单击以显示年龄
{this.state.age}*/}
);
}
}
导出默认页面；

首先，您不需要像评论中所说的那样在page1组件中触发显示。像这样使用它：

<h1 onClick = {props.showAge}>Click to show age</h1>

---

请与我们共享错误消息。您是否尝试过只执行

onClick={props.showAge}

？函数名末尾没有paren？您是否尝试将state对象放入构造函数中？我们不知道错误，所以我们不能确切地说什么。我已经试过onClick={props.showAge}。当我点击时，它不会读取。我可以发布错误。这就是我将其保留为{props.showAge（）}的时候。它会接受单击，但当您单击它时，会出现此错误。

showAge = () =>
    this.setState({
      age: "25"
    });