Question

＆＃13;

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

＆＃13;

我有上面的代码，我想在子组件中使用getTheValue函数。我需要在parent.i中绑定getTheValue函数使用以下两种方法来绑定

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

这是什么.props.someFunc（'placeHolder'，value）doint？它是在改变国家吗？

Answer 2

你的装订很好

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

Answer 3

在父级中，您调用loadData（），它作为子渲染操作的一部分执行，而loadData通过调用someFunc来创建对象 - 所以当渲染Child时，道具正在改变。

尝试这样的事情：

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

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

3 个答案: