Question

我可以使用状态为库存的json来填充选择器

  produits: [{
      "code": 11,
      "pu": 50,
      "ps": 50,
      "des": "P 1",
      "promo": "1",
    }, {
      "code": 22,
      "pu": 100,
      "ps": 100,
      "des": "P 2",
      "promo": "1",
    }, {
      "code": 33,
      "pu": 80,
      "ps": 80,
      "des": "P 3",
      "promo": "0",
    },
    {
      "code": 44,
      "pu": 120,
      "ps": 120,
      "des": "P 4",
      "promo": "1",
    },
  ],

我想要的东西是一样的，但是如果produits.promo ==='1'将会显示，否则将不会显示，这是我的方法，但是它有一个空选择器：当我单击时，没有任何变化：

          {<Picker
            style={Styles.picker}
            selectedValue={this.state.pu}
            onValueChange={(itemValue, itemIndex) => this.setState({pu: itemValue, codeProduit: itemIndex+1,})} >
            { this.state.produits.map((item, key)=>
              {if (item.promo === "0") {
                <Picker.Item label={item.des} value={item.pu} key={item.code} />
                }
              }
            )}
          </Picker>}

PS。在没有If阻止的情况下效果很好：

<Picker.Item label={item.des} value={item.pu} key={item.code} />

我的方法有什么问题？

Answer 1

我不确定我是否正确，但请尝试一下。有关说明，请参见代码注释。

渲染方法：

 render() {
    return (
      <View style={styles.container}>
        <Picker
            selectedValue={this.state.pu}
            onValueChange={(itemValue, itemIndex) => this.setState({pu: itemValue, codeProduit: itemIndex+1,})} >
            {this.renderPicker()}            
          </Picker>
      </View>
    );
  }

renderPicker方法：

  renderPicker(){
    const items = this.state.produits.map((item, key)=> {
      // if item.promo === "1" return picker item 
      if (item.promo === "1") {
      // make sure to return Picker Item
      return (<Picker.Item label={item.des} value={item.pu} key={item.code} />);
      }
    });
    // return list of pickers
    return items; 
  }

输出：

工作示例：

https://snack.expo.io/@tim1717/trembling-turkish-delight

Answer 2

只需使用过滤器创建一个新的产品数组

render() {
const promoProduits = this.state.produits.filter(item => item.promo === '1');
....

然后像渲染

{<Picker
    style={Styles.picker}
    selectedValue={this.state.pu}
    onValueChange={(itemValue, itemIndex) => this.setState({pu: itemValue, codeProduit: itemIndex+1,})} >
    {
     promoProduits.map((item, key)=> (<Picker.Item label={item.des} value={item.pu} key={item.code} />)
    }
</Picker>}

根据条件在json中填充一个选择器

2 个答案: