私はコンポーネントのフィルタ機能を実装しようとしています

Question

動作しない反応で、私のテーブルをフィルタリングします。フィルタリングされた行は状態オブジェクトに依存し、初期リストは「小道具」を通過しています。私はcomponentWillMountの状態を初期化するが、私は値があるのrender（）メソッドではconsole.logを行う際小道具内のリストは、しかし、常に空です。私は間違って何をしていますか？

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

そのハードは、あなたの説明に基づいていますが、props経由initial valueを通過した後、あなたのstate内に保持された値を持つようにしようとしている場合は、ここでの例であると言うこと。あなたのfiltered valuesの値は、あなたのonChangeがあなたのレンダリングやselected内に格納して呼ばれることになるたびに更新されます。

これは、あなたの状態は子コンポーネントをレンダリングすることを許可する前に、親オブジェクトに設定されるまで、あなたは待つレンダリングで、ansychronous通話のために動作します。

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

componentDidMount（）の内部では、同期可能な値の状態を設定します。値を取得したら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} 
      } 

子COMPの例

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} /> 
     ) 
    } 
}