Javascript onClick更改子组件的状态

我想更新两个组件之间的状态，我的react知识有点生疏，但这就是我构建组件的方式

子组件-向API端点发出get请求，并将数据呈现到我的图表库中

    export default class EmployerLearningNeeds extends Component {
      constructor(props) {
        super(props)
        this.state = {
          employerData: [],
        }
      }

    componentDidMount() {
        this.fetchData() // 
      }

      fetchData = () => {
        axios.get(fullAPI).then(res => {
          const apiResponse = res.data
          apiResponse.map(employer => {
            console.log('ChildResponse', apiResponse)
            // eslint-disable-next-line no-param-reassign
            employer.value = employer.value.toFixed(2)
            return employer
          })
          this.setState({
            employerData: apiResponse,
          })
        })

  }

    getOption = () => ({ data: this.state.employerData })

    render() {
     return( 
    <ReactEcharts option={this.getOption()}
    )}

导出默认类EmployerLearningNeeds扩展组件{
建造师（道具）{
超级（道具）
此.state={
员工数据：[]，
}
}
componentDidMount（）{
此文件为.fetchData（）//
}
fetchData=（）=>{
get（fullAPI）.then（res=>{
常数apiResponse=res.data
apiResponse.map（雇主=>{
console.log（'ChildResponse'，apireponse）
//eslint禁用下一行无参数重新分配
employer.value=employer.value.toFixed（2）
返回雇主
})
这是我的国家({
雇员数据：apiResponse，
})
})
}
getOption=（）=>（{data:this.state.employerData}）
render（）{
报税表（
{
get（apirl）.then（res=>{
console.log（'父响应'，res.data）
这是我的国家({
雇员数据：资源数据，
})
})
}
render（）{
返回(
点击我
)
}

从父组件传递到子组件的任何内容都将位于

this.props

，而不是

this.state

从代码来看，您似乎希望父级能够获取不同的数据集，并将其传递给子级进行渲染

如果家长要进行数据提取并向下传递数据，为什么还要在孩子中设置

fetchData

（由于

组件将接收props

现在已替换为

静态getDerivedStateFromProps

）

每当父级为

EmployeerDetails

传入一组新数据，处理数据，并将结果放入

此.state

（这意味着您可以保持

render（）

函数不变）时，就会触发此命令

您还可以去掉

组件willmount

、

fetchData

和

getOption

，并将

渲染更改为以下内容：

render() {
    const { employerData } = this.props;
    const option = employerData.map(e => e.value = e.value.toFixed(2));

    return( 
        <ReactEcharts option={{ data: option }}
    )
}

render（）{
const{employerData}=this.props；
const option=employerData.map（e=>e.value=e.value.toFixed（2））；
报税表（
抱歉，我觉得这有点难以理解…如果在呈现页面时从子组件中移除componentDidMount，我的图形将为空，这不是我想要的，子组件的目的是绘制图形并呈现通用数据。父组件中的fetchData背后的思想是最终它将为空用作筛选组件，根据需要获取数据并更新状态。啊，好的，请理解。在这种情况下，您需要通过
props
访问传递的数据，或者使用
getDerivedStateFromProps
在父级传递新数据时更新子级的
状态。
static getDerivedStateFromProps(props) {
    const apiResponse = props.employerData;
    apiResponse.map(employer => {
        console.log('ChildResponse', apiResponse);

        // eslint-disable-next-line no-param-reassign
        employer.value = employer.value.toFixed(2);

        return employer;
    })

    return { employerData: apiResponse };
}

render() {
    const { employerData } = this.props;
    const option = employerData.map(e => e.value = e.value.toFixed(2));

    return( 
        <ReactEcharts option={{ data: option }}
    )
}