在检查 render() 中的某些条件后，想使用 setState 更新状态值，我该怎么做？

Question

我想在 render() 中写入 setState() 会导致无限调用 render()，但我必须以类似的方式更新条件。

这是我的模拟代码。

export default class MapSeat extends Component {
constructor(props) {
    super(props)
    this.state = {
      data: props.data
    }
  }

  componentWillReceiveProps(nextProps){
    this.setState({ data: nextProps.data });
  }

render(){
    const { data } = this.state;
    const { parameter1, parameter2} = data;

    return (
          <SomeComponent
            persons={data.persons}
            onPersonSelect={(f) => {
              let person = find(data.persons, function (o) { return o.id === f; });

              this.setState({
                data: {
                  parameter1: person.fullName,
                  parameter2: person.id
                }
              });
              this.setState({ data: this.state.data });
            }}/>
        )
    }
}

Answer 1

在组件主体中定义您的处理程序方法。

personSelectHandler(f){
 let data = // You need to get data from somewhere of course.
 let person = find(data.persons, function (o) { return o.id === f; });

          this.setState({
            data: {
              parameter1: person.fullName,
              parameter2: person.id
            }
          });
          this.setState({ data: this.state.data });
}

然后像这样从 render() 引用它：

render(){

 return (
      <SomeComponent
        persons={data.persons}
        onPersonSelect={this.personSelectHandler} />
 );
}

最后，在 <SomeComponent /> 中你可以这样称呼它：

handler(){
  let f = //your param to send parent
  this.props.onPersonSelect(f);
}

Answer 2

您可以做的是：

1) 定义回调函数，在你的例子中：

(f) => {
          let person = find(data.persons, function (o) { return o.id === f; });

          this.setState({
            data: {
              parameter1: person.fullName,
              parameter2: person.id
            }
          });
          this.setState({ data: this.state.data });
        }

作为 mapSeat 组件中的一个单独函数。（为简单起见，我们将此函数称为 'foo'）

2) 将该函数绑定到地图座位组件构造函数：

this.foo = this.foo.bind(this);

3) 在调用组件时将您在步骤 2 中定义的函数的引用作为 props 传递：

<SomeComponent
        persons={data.persons}
        onPersonSelect={this.foo}/>

4) 最后在您的新组件（即 SomeComponent）中。每当需要回调函数时，只需按以下方式调用该函数即可：

this.props.foo();

由于第2步，函数将绑定到父组件的上下文。因此，即使从子组件调用它，也将能够修改父组件的状态。

注意：这将触发父组件的 render() 方法并扩展子组件。

希望对您有所帮助！ :)

在检查 render() 中的某些条件后，想使用 setState 更新状态值，我该怎么做？

after checking some condition inside render() want to update state value using setState, how can I do that?

render

setstate

reactjs