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 }}
    )
}

子组件ReactJS的onClick更改状态

1 个答案: