Question

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

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

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

inside componentWillReceiveProps方法我使用作为数据返回的props设置本地状态我将setState（）代码放在此方法中，以确保在connect（）合并本地props内的数据后执行。（有更好的地方吗？）

 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，但它绝对不是你想用redux做的。

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

此外，使用Redux，您通常不会从componentWillMount启动Ajax请求。通常，您会在适当的时间（app启动，或者如果您使用react-router为路径的'enter'事件）发送操作。

使用mapStateToProps（）给出的Redux props设置组件的本地状态

1 个答案: