javascript - 处理循环内动态选择器的点击 react native

Question

我正在我的代码中创建动态选择器，选择器的数量基于我的可配置数组下的响应。我能够创建选择器，但我面临的问题是，如果我更新任何选择器，它会重置值立即所有选择器，我知道当我调用 setState 函数时，渲染方法会再次调用，根据当前状态值管理项目，但这是我在项目中的要求，所以任何人都可以建议我一种方法来做到这一点，这对我来说非常关键.

这是我的代码:-

loadData(item) {
    return item.options.map(user => (
      <Picker.Item label={user.label} value={user.id} />
    ))
  }

  renderConfigurableProductDetail() {
      array = this.props.ProductDetailState.productData.configurable;
    {
    return array.map((item) => {
    if(item.label!="Size"){
      return <View style={{ flex: 1, backgroundColor: "white", flexDirection: "column", marginTop: 8 }}>
        <CustomText style={{ fontSize: 16, fontFamily: "futuraLigtBt", marginLeft: 6, paddingLeft: 15, paddingRight: 15, paddingTop: 5, paddingBottom: 5 }}>
          {item.label}
        </CustomText>
        <Picker
          selectedValue={this.state.selectedDropDownValue}
          onValueChange={(itemValue, itemIndex) => this.onClickDropdown(itemValue,itemIndex)}>
          {this.loadData(item)}
        </Picker>
      </View>;
    }
    })
  }
  };

onClickDropdown(data,index){
    alert(data+" "+index)
    this.setState({ selectedDropDownValue: data});
  }

第二种方法:-

loadData(item) {
    return item.options.map(user => (
      <Picker.Item label={user.label} value={user.id} />
    ))
  }

  renderConfigurableProductDetail() {
    let array=[];
    if (CustomConfigArray.length>0){
      array = CustomConfigArray;
    }else{
      array = this.props.ProductDetailState.productData.configurable;
    }
    return array.map((item,i) => {
    if(item.label!="Size"){
      return <View style={{ flex: 1, backgroundColor: "white", flexDirection: "column", marginTop: 8 }}>
        <CustomText style={{ fontSize: 16, fontFamily: "futuraLigtBt", marginLeft: 6, paddingLeft: 15, paddingRight: 15, paddingTop: 5, paddingBottom: 5 }}>
          {item.label}
        </CustomText>
        <Picker
          selectedValue={this.state.selectedDropDownValue[i]}
          onValueChange={(itemValue, itemIndex) => this.onClickDropdown(itemValue,itemIndex)}>
          {this.loadData(item)}
        </Picker>

      </View>;
    }
    })
  };

onClickDropdown(value,index){
    let selectValue = this.state.selectedDropDownValue;
    selectValue[index] = value;
    this.setState({
      selectedDropDownValue: selectValue
    });
  }

可配置阵列 :-

"configurable": [{
              "id": "142",
              "code": "size",
              "label": "Size",
              "options": [{
                "attribute_id": "142",
                "atribute_code": "size",
                "id": "171",
                "label": "XL",
                "products": [
                  "2071",
                  "2074"
                ]
              }, {
                "attribute_id": "142",
                "atribute_code": "size",
                "id": "172",
                "label": "L",
                "products": [
                  "2072"
                ]
              }]
            },
            {
              "id": "93",
              "code": "color",
              "label": "Color",
              "options": [{
                "attribute_id": "93",
                "atribute_code": "color",
                "id": "50",
                "label": "Blue",
                "products": [
                  "2071"
                ]
              },
              {
                "attribute_id": "93",
                "atribute_code": "color",
                "id": "60",
                "label": "Black",
                "products": [
                  "2072"
                ]
              }, {
                "attribute_id": "93",
                "atribute_code": "color",
                "id": "64",
                "label": "Cyna",
                "products": [
                  "2072"
                ]
              }, {
                "attribute_id": "93",
                "atribute_code": "color",
                "id": "61",
                "label": "White",
                "products": [
                  "2071",
                  "2074"
                ]
              }
              ]
            },
            {
              "id": "148",
              "code": "format",
              "label": "Format",
              "options": [{
                "attribute_id": "148",
                "atribute_code": "format",
                "id": "102",
                "label": "Download",
                "products": [
                  "2072",
                  "2071",
                  "2074"
                ]
              },
              {
                "attribute_id": "148",
                "atribute_code": "format",
                "id": "103",
                "label": "File",
                "products": [
                  "2071",
                  "2074"
                ]
              }
              ]
            }
            ]

如果有办法实现这一点，请告诉我，我用 Goggled 了很多，但没有找到任何适合我的代码的东西。所以我在这里寻求你的帮助

问候

Answer 1

你很接近，但还不够。每次更改值时，都会覆盖所有选择器的状态值。要解决此问题，请考虑进行以下更改。

// load selectedDropDownValue data from state with the item's id
// pass the item value to the change function
<Picker
  selectedValue={this.state.selectedDropDownValue[item.id]}
  onValueChange={(itemValue, itemIndex) => this.onClickDropdown(itemValue, itemIndex, item)}
>
  {this.loadData(item)}
</Picker>

---

onClickDropdown(data, index, item){
  // save each items selected data with their id
  this.setState((prevState) => {
    const { selectedDropDownValue } = Object.assign({}, prevState.selectedDropDownValue, { [item.id]: data});
    return { selectedDropDownValue };
  });
}