javascript - 使用 mapStateToProps() 给出的 Redux Prop 设置组件的本地状态

Question

我有一个输入值列表，我需要用从调度函数返回的信息填充这些值...我无法在 componentWillMount 中设置状态，因为我需要等待 reducer 将信息返回到状态。

在 componentWillMount 方法内部调度调用以获取数据

componentWillMount() {
        this.props.getData(this.props.params.id);
 }

在 componentWillReceiveProps 方法中，我使用作为数据返回的 Prop 设置本地状态我将 setState() 代码放在这个方法中，以确保在 connect() 合并本地 Prop 中的数据后执行。 (还有更好的地方吗？)

 componentWillReceiveProps(nextProps) {
        if (nextProps.data) {
            this.setState({
                contact: nextProps.data.contact,
                number: nextProps.data.number,
                date: nextProps.data.date,
                payment: nextProps.data.payment,
                fields: nextProps.data.fields
            });
        }
}

然后我渲染字段，将它们作为状态的值

renderInputFields() {
        if (this.state.fields) {
            return this.state.fields.map(function(field, index) {
                return (
                    <div key={'line-' + index}>

                        <input key={'quantity-' + index}
                               type="text"
                               id={index}
                               name="quantity"
                               placeholder="Add quantity"
                               value={field.quantity}
                               onChange={this.onFieldChange} />

                        <input key={'description-' + index}
                               type="text"
                               id={index}
                               name="description"
                               placeholder="Add description"
                               value={field.description}
                               onChange={this.onFieldChange} />

                        <input key={'price-' + index}
                               type="text"
                               id={index}
                               name="price"
                               placeholder="Add price"
                               value={field.price}
                               onChange={this.onFieldChange} />
                        <a onClick={this.onAddField}>
                            <i className="fa fa-times" aria-hidden="true"></i>
                        </a>

                    </div>
                )
            }, this);
        }
    }

const mapStateToProps = (state) => {
    return {
        data: state.data.selected
    }
}

export default connect(mapStateToProps, { getData, updateDate, genData, deleteData })(DataEditor);

现在问题:

这是获得我需要的结果的好做法吗？

Answer 1

对于 Redux，您应该默认使用无状态组件。无论您是否使用 redux，从 props 复制状态都是一种反模式，但这绝对不是您想要用 redux 做的事情。

似乎拥有无状态组件似乎效率低下 - 特别是对于像您这里这样的输入字段。但事实并非如此。虚拟 DOM 将确保您在输入字段中的击键最终不会对 DOM 产生影响(因为它已经同步)。

此外，对于 Redux，您通常不会启动来自 componentWillMount 的 Ajax 请求。通常，您会在适当的时间(应用程序启动，或者如果您使用的是 react-router，则为路由发送“输入”事件)发送操作。