Фильтрация моей таблицы в реакции не работает

Question

Я пытаюсь реализовать функциональность фильтра в компоненте. Отфильтрованные строки зависят от объекта состояния, а исходный список проходит через «реквизит». Я инициализирую состояние в компонентеWillMount, но список в реквизитах всегда пуст, однако, когда я делаю console.log в методе render(), значения есть. Что я делаю не так ?

componentDidMount() { 
    this.setState({ 
     data: this.props.possibleValues, 
     filteredValues: this.props.possibleValues 
    }); 
    console.log(this.props.possibleValues) //empty 
    console.log(this.state.filteredValues) //empty 
    } 

Answer 1

Сложно сказать основываясь на описании, но если вы пытаетесь пройти через initial valueprops, а затем имеют значения, которые в вашем state вот пример. Значения для вашего filtered values обновляются каждый раз, когда ваш onChange будет вызываться в вашем рендере и сохраняется в пределах selected.

Это будет работать для безысходных вызовов, в вашем рендере вы ждете, пока состояние не будет установлено на родительском объекте, прежде чем разрешить рендеринг дочернего компонента.

someAsyncSetup() { 
... doing something 
     this.setState({ 
      possibleValues : possibleValues 
     }); 
} 

Внутри компонентаDidMount() вы устанавливаете свое состояние для возможных значений, которые являются синхронными. Когда вы получите свои значения, вызовите setState(). Тогда рендер будет ждать до тех пор, пока не будет завершена до создания дочерних компонентов

{this.state.possibleValues != null &&... 
    <ExampleChild... 

Пример родительского компе

constructor(props) { 
    super(props); 
    this.state = {possibleValues: null}; 
    this.onChange = this.onChange.bind(this); 
    this.someAsyncSetup = this.someAsyncSetup.bind(this); 
} 

onChange(selected) { 
    this.props.onChange({ selected }); // you may need to call your parent props again 
} 

someAsyncSetup() { 
... doing something 
      this.setState({ 
       possibleValues : possibleValues 
      }); 
} 

componentDidMount() { 
    this.someAsyncSetup(); // inside here you set your state for possible values. Then the render will wait until it is completed before creating the child component 
} 

{this.state.possibleValues != null && 
       <ExampleChild 
        onChange={this.onChange} 
        possibleValues={this.state.possibleValues} 
      } 

Пример детской компе

class ExampleChild extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { selected: this.props.filteredValues }; 
     this.onChange = this.onChange.bind(this); 
    } 

    // onChange we want to set the list of selected values 
    onChange(selected) { 
     this.setState({ selected }); 
     // call the parent component's onChange so that we set the values 
     // within the parents component state 
     this.props.onChange(selected); 
    } 

    render() { 
     return (
      <someComp 
      options={this.props.possibleValues} 
      selected={this.state.selected} 
      defaultValue={this.props.filteredValues} 
      onChange={this.onChange} /> 
     ) 
    } 
}