Javascript 当用户单击按钮时，用json填充数组

我必须让用户在产品p1、p2，。。。android上有一个react native picker，然后他必须用TextInput设置所选产品的数量，然后我必须在单击添加按钮后向他显示他选择的产品，每次添加后，单击一个新的产品项，并显示他的数量：

我不知道如何在数组或JSON中设置数据productId和数量

这是代码的一部分：

 constructor(props){
    super(props)
    this.state = {
      valueP: '',
      quantity: '',
    }}
...
<View style={Styles.type12Container}>
                  <View style={Styles.inputContainer}>
                    <Picker
                      value={this.state.valueP}
                      style={Styles.picker}
                      mode= "dropdown"
                      prompt= "XXX"
                      selectedValue = {this.state.valueP}
                      onValueChange = {(val) => { this.setState({valueP: val}}}>
                      <Picker.Item label="P 1" value="1" />
                      <Picker.Item label="P 2" value="2"/>
                      <Picker.Item label="P 3" value="3" />

                    </Picker>
                  </View>
                  <View style={Styles.inputContainer}>
                  <TextInput
                    value={this.state.quantity}
                    style={Styles.inputStyle}
                    onChangeText={(val) => this.setState({quantity: val})}
                  />
                  </View>

                  <View style={Styles.button1Container}>
                    <TouchableOpacity
                    onPress={this.addConv}
                    style={Styles.buttonAdd}>
                      <Text style={Styles.button1Text}>Add</Text>
                    </TouchableOpacity>
                  </View>

                  <View style={Styles.output}>
                    <View>
                      <Text style={Styles.button1Text}>products and quantity items</Text>
                    </View>
                  </View>
              </View>

---

你能给我推荐一个解决方案或类似的例子吗？我不完全确定你在问什么，但我猜你正在努力呈现用户添加的项目列表。为了做到这一点，您需要将它们存储在某个地方——为了简单起见，让我们将它们存储在组件的状态中

您没有提供this.addConv的功能，但我假设它的实现是正确的

...
constructor(props) {
  super(props);
  this.state = {
    ...,
    items = []
  }
}
...
this.addConv = () => {
  const newItem = {
    id: this.state.valueP,
    quantity: this.state.quantity
  };
  this.setState(state => ({
    items: state.items.concat([newItem])
  }));
}
...
render() {
...
<View style={Styles.output}>
  <View>
    {this.state.items.map(item => (
      <Text style={Styles.button1Text}>{this.getProductName(item.id)} - {item.quantity}</Text> // or whatever you want to do with this
    ))}
  </View>
</View>
...

---

这就是您要问的吗？

请发布您当前的代码，以便我们可以使用它。否则，您将只能得到可能不适用于您当前代码的一般答案。我将在我的后请提供您尝试过的代码块的答案中添加它，并尝试添加更多技术性的内容detail@zedArt这不是它应该去的地方，你应该把它添加到你的问题中。现在好了，这是EditDim询问如何向每个项目添加数据产品和数量。事实上，数据事件会做什么？我不知道如何获取这些数据并将其存储在item5[]中，这取决于您想要呈现什么。组件有两个状态字段：数量和相当神秘的值P。我假设您希望基于此显示项目的信息。然而，valueP只是一个表示数字的字符串，没有任何意义。是的valueP从picker获取值，但每次用户选择另一个产品时它都会改变，所以我不必显示它。我已经用一个通用示例编辑了我的答案，说明了如何处理数据。此.getProductName假定您不希望仅显示一个数字，而是基于valueP显示产品的实际名称。一旦用户单击“添加”，该项目将使用当前选择的值添加到状态，因此以后的更改不会影响此特定项目的显示内容。我希望我没弄错。