如何将多个数据的数组设置为状态

时间:2019-08-31 17:24:56

标签: react-native axios

所以基本上,我希望能够从多个输入中收集所有值并将该数组设置为状态。这是我目前正在使用的东西:

this.state.basket.map(b => {
  return (
    <View>
      <InputSpinner
        style={styles.spinnerQty}
        max={50}
        min={1}
        step={1}
        rounded={false}
        showBorder
        colorMax={"#2a292d"}
        colorMin={"#2a292d"}
        value={b.qty}
        onChange={num => {
          this.setState({ popUpQty: num });
        }}
      />

      <View style={styles.hrLine}></View>
    </View>
  );
});

因此,我正在迭代basket并使用axios输出中的值设置微调器。因此,现在有多个具有多个值的InputSpinner。 我的问题是,如何收集onChange的所有值,并将其推到最终成为状态的数组中。像QuantityState: []这样的东西就是所有InputSpinner的值。希望有道理。任何帮助表示赞赏。谢谢!

PS。 InputSpinner是here的npm软件包。

1 个答案:

答案 0 :(得分:2)

通过此代码,您可以在特定数组实例上动态添加/更新onChange号。 num 键将在特定的onChange触发器时添加,因此最后您将获得其值放置在其索引上,如果未找到键,则意味着该索引从未触发过onChange

state = {
        spinnerData : {},
        basket: []
    }



    this.state.basket.map((b, index) => {
      return (
        <View>
          <InputSpinner
            style={styles.spinnerQty}
            max={50}
            min={1}
            step={1}
            rounded={false}
            showBorder
            colorMax={"#2a292d"}
            colorMin={"#2a292d"}
            value={b.qty}
            onChange={num => {
              const newbasket = [...this.state.basket];
              newbasket[index]["num"] = num;
              this.setState({ basket:newbasket });
            }}
          />

          <View style={styles.hrLine}></View>
        </View>
      );
    });