Question

我正在使用Flux在React App上工作 - 其目的是购买标准购物车。

我遇到的麻烦是映射一些数据，并为每次迭代渲染一个子组件，需要本地状态才能在提交之前处理表单数据，因为我从内部获取冲突的道具不同的功能。

以下组件是HTML表，其中包含所有产品的列表。

/*ProductList*/
export default React.createClass({
    getProductForms: function(product, index) {
        return (
            <ProductForm
                product={product}
                key={index}
            />
         )
    },
    render: function() {
        var productForms;

        /*this is set from a parent component, which grabs data from the ProductStore*/
        if(this.state.products) {
            productForms = this.state.products.map( this.getProductForms );
        }
        return (
            <div className="product-forms-outer">
                {productForms}
            </div>
        );
    }
});

但是，每个子组件都有一个表单，如果我理解正确，表单值应该由本地状态（？）控制。 Render方法总是获取期望的props值，但是我想从props中设置setState，所以我可以传递初始值（来自商店）并保持对表单值的控制。

但是，componentDidMount()道具总是只返回最后一个迭代的子项。我也尝试过componentWillReceiveProps()和componentWillMount()同样的效果。

/*ProductForm*/
export default React.createClass({
    componentDidMount: function() {
        /*this.props: product-three, product-three, product-three*/
    },
    render: function() {
        /* this.props: product-one, product-two, product-three */
        <div className="product-form">
            <form>
                /* correct title */    
                <h4>{this.props.productTitle}</h4>
                /* This needs to be state though */
                <input 
                    value={this.state.quantity} 
                    onChange={this.handleQuantityChange}
                    className="product-quantity"
                 />
            </form>
        </div>
    }
});

请告诉我是否有更多细节我可以提供更清楚的信息 - 为了简单起见，我已删除了其他元素。

提前致谢！

Answer 1

这很奇怪。或者，您可以将构造函数中的状态设置为每个字段的空值，例如

constructor(props) {
  super(props);
  this.state = {quantity: ''};
}

然后在你的渲染函数中做smthg就像：

render: function() {
    let compQuantity = this.state.quantity || this.props.quantity;

    /* this.props: product-one, product-two, product-three */
    <div className="product-form">
        <form>
            /* correct title */    
            <h4>{this.props.productTitle}</h4>
            /* This needs to be state though */
            <input 
                value={compQuantity} 
                onChange={this.handleQuantityChange}
                className="product-quantity"
             />
        </form>
    </div>
}

这种方式在第一次渲染时它将使用道具中传递的任何内容，当您更改值时，handleQuantityChange函数会将状态设置为新值，compQuantity将然后从州获取其价值。

Answer 2

所以我弄清楚问题是什么。我没有正确使用getProductForms方法中的密钥。我正在调试，只输出每种形式的索引 - 它总是0,1,2,3 ......（显然）。所以我研究了每个人与国家的关系。

鉴于我使用的数组的顺序（最近的第一个），第一次迭代总是的索引和键为0，即使它是最新的项目。所以React可能只是假设'0'项目从一开始就是相同的。我知道有很多反应的细微差别，我并不完全理解，但我认为这证明循环组件的状态与它的关键直接相关。

我所要做的就是使用不同的值作为密钥 - 这是我对每个产品的唯一ID，而不仅仅是使用数组索引。更新的代码：

/*ProductList*/
getProductForms: function(product, index) {
    return (
        <div key={product.unique_id}>
            <ProductForm
                product={product}
            />
        </div>
     )
},

映射数组，重用的子组件道具不变

2 个答案: