如何绑定父组件中的函数？

Question

import * as React from 'react';

export default class Parent extends React.Component {
  loadData() {
    return {
      valueA: this.props.intl.formatMessage({id: 'app.placeHolder'}),
      valueB: this.getTheValue
    };
  }
  getTheValue(value) {
    return this.props.intl.formatMessage({id: 'app.placeHolder'}, {price: value});
  }

  render() {
    return <Child data={this.loadData()} />;
  }
}

class Child extends React.Component {
  render() {
    return <div>{this.props.data.valueB(1000)}</div>;
  }
}

我有上面的代码，我想在子组件中使用getTheValue函数。这里我需要在父组件中绑定getTheValue函数。我使用以下2种方式绑定

1)  getTheValue = (value) => {
return this.props.someFunc('placeHolder', value);
}

或

2) valueB: () => this.getTheValue()

主要问题是，这两种方式出现以下错误。

[ 'Warning: Cannot update during an existing state transition (such as within `render` or another component\'s constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.' ]

我想知道这个错误是否与绑定有关？我绑定正确吗？ 代码可以通过其中一种方式正常工作，但是当我运行测试但通过测试没有任何问题时出现错误。但我想删除错误。

Answer 1

this.props.someFunc('placeHolder', value) 是什么？它是在改变状态吗？

Answer 2

在父级中，您正在调用 loadData()，它作为子级渲染操作的一部分被执行，并且 loadData 正在通过调用 someFunc 来创建对象 - 所以在渲染 Child 时，道具会发生变化。

试试这样的：

  render() {
    let data = this.loadData();
    return <Child data={data} />;
  }

Answer 3

你的绑定没问题

在parent 中，您正在通过调用this.loadData() 来更新渲染函数中的状态

您可能希望重新构建在组件中加载数据的方式。也许是这样的：

export default class Parent extends React.Component {
  componentDidMount() {
    someService.loadData().then(data => {
      this.setState(data)
    });
  }

  dataIsLoaded() {
    //... check this.state to see if data is loaded
  }

  render() {
    return this.dataIsLoaded
      ? <Child data={this.state.data}
      : <p>Loading</p>
  }
}