после проверки некоторых условий внутри render () хотите обновить значение состояния с помощью setState, как я могу это сделать? - PullRequest
Новая
       16

после проверки некоторых условий внутри render () хотите обновить значение состояния с помощью setState, как я могу это сделать?

0 голосов
/ 28 мая 2018

Я полагаю, что запись setState () внутри render () приводит к бесконечному вызову 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 });
            }}/>
        )
    }
}

Ответы [ 2 ]

0 голосов
/ 28 мая 2018

Что вы можете сделать:

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, как подпорки при вызовекомпонент: 

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

4) Наконец, в вашем новом компоненте (то есть SomeComponent).Просто вызывайте эту функцию следующим образом всякий раз, когда требуется функция обратного вызова: 

this.props.foo();

Из-за шага 2 функция будет связана с контекстом родительского компонента.И, таким образом, сможет изменять состояние родительского компонента, даже если он вызывается из дочернего компонента.

Примечание. Это вызовет метод render () родительского компонента и, соответственно, расширения дочернего компонента.компонент.

Надеюсь, это поможет!:)

0 голосов
/ 28 мая 2018

Определите ваш метод обработчика в теле компонента.

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