在反应中过滤我的表不起作用

Question

我正在尝试在组件中实现过滤功能。过滤的行取决于状态对象，初始列表通过“props”传递。我在componentWillMount中初始化状态，但props中的列表总是为空，但是当我在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

很难根据您的说明进行说明，但如果您尝试通过initial value通过props，然后将state中的值保存在此处就是一个示例。每次在渲染中调用onChange并将其存储在filtered values中时，selected的值都会更新。

这将适用于同步调用，在渲染中等到父对象上设置状态，然后才允许渲染子组件。

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

在componentDidMount（）内部，您可以为可能的异步值设置状态。获得值后，调用setState（）。然后渲染将等到它完成后再创建子组件

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

父comp的示例

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