Question

我正在努力开发React-redux应用程序，以便通过状态将值从一个组件传递到另一个组件。我不想使用reducer和/或dispatch，因为我没有调用webservice，我只想从文本框表单中获取一个值来启用对订单组件的另一个控件。

首先，我可以从控件中获取值，但是当调用mapstatetoprops时，我设置的变量以及希望添加到状态的变量是未定义的。这也可能解释了为什么我的另一个问题。在我的其他组件上，由于state-componentWillReceiveProps

，从不调用使用props的函数

以下是相关的代码段：

<ListItemContent>
    <Control component={Textfield} model="somemodel" label="MyLabel" onBlur={this.onChangeOfValue}/>
</ListItemContent> 

onChangeOfValue = (event) => { 
    this.setState({ 
        newValueToPassAlong: event.target.value
    }); //newValueToPassAlong is set in constructor 
};

let mapStateToProps = (state) => { 
    return {
        newValueToGive: state.newValueToPassAlong
    } // This is undefined
}; 

export default connect(mapStateToProps)(form)

所以，我的问题是如何使用React-redux向一个状态添加一个新变量而不需要reducers等等，这可以在我的其他组件中访问这个变量吗？

Answer 1

除了动作创建者偏好之外，如果你想在共享一个共同父级的两个组件之间同步某些东西，你必须将该状态带入父级。

class ParentComponent {
    onItemChanged = (newData) => {
        this.setState({ thing: newData });
    }

    render() {
        return (
            <div>
                <ChildA onItemChanged={ this.onItemChanged } />
                <ChildB thing={ this.state.thing } />
            </div>
        );
    }
}

更改ChildA中的值时，请将this.props.onItemChanged与新值一起使用。在ChildB中，该值将在this.props.thing中同步。 React将处理所有组件/道具更新。

尽管如此，我真的认为使用动作创建者/减速器并没有错。

Answer 2

setState（）不会立即改变this.state，但会创建挂起状态转换。在调用此方法后访问this.state可能会返回现有值。

Refer documentation for more about setState()

React-redux向状态

2 个答案: