Javascript 使用mapStateToProps（）提供的Redux道具设置组件的本地状态

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

Inside componentWillMount方法调度调用以获取数据

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

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

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

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);

renderInputFields（）{
if（this.state.fields）{
返回this.state.fields.map（函数（字段，索引）{
返回(
)
}，这个）；
}
}
常量mapStateToProps=（状态）=>{
返回{
数据：state.data.selected
}
}
导出默认连接（MapStateTops，{getData，updateDate，genData，deleteData}）（数据编辑器）；

现在的问题是：

---

这是获得所需结果的一种好做法吗？

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

看起来，使用无状态组件似乎效率低下，尤其是像这里这样的输入字段。但事实并非如此。虚拟DOM将确保输入字段中的击键不会对DOM产生任何影响（因为它已经同步）

此外，使用Redux，您通常不会启动来自componentWillMount的Ajax请求。通常，您会在适当的时间发送一个操作（应用程序启动，或者如果您正在使用react router，则为路由发送一个“enter”事件）

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);