onClick 改变子组件 ReactJS 的状态

Question

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

子组件 - 向 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()}
    )}

父组件 - 渲染我的子组件，按钮点击应该更新我的子组件的状态

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

testFunction = () => {
    axios.get(apiURL).then(res => {
      console.log('Parent response', res.data)
      this.setState({
        employerData: res.data,
      })
    })
  }
render() {
    return (
            <button href="#" onClick={this.testFunction}>
              click me
            </button>
            <EmployerLearningNeeds employerData={this.state.employerData} />
    )
  }

Answer 1

您从父组件传递到子组件的任何内容都将位于this.props，而不是this.state。

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

如果父母要进行提取并将数据向下传递，为什么还要在孩子中使用fetchData？ （如果我遗漏了什么，请道歉 - 不是 100% 确定您要做什么。）

（因为 componentWillReceiveProps 现在已被替换为 static 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 };
}

每当父级为employerDetails 传入一组新数据、处理数据并将结果放入this.state 时都会触发（这意味着您可以保持render() 函数原样）。

您也可以去掉 componentWillMount、fetchData 和 getOption，并将您的 render 更改为以下内容：

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

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