使用单选按钮在 react-native 中有条件列出的正确方法？

Question

应用程序从外部服务器接收到一些这样的列表。

[ 
{'type' : 'fruits', 'name' : 'banana'}, 
{'type' : 'fruits', 'name' : 'apple'},
{'type' : 'vegetables', 'name' : 'carrot'},
{'type' : 'vegetables', 'name' :'onion'}   
]

然后我会把它保存到 redux store 以通过 mapStateToProps 在某些组件中使用它。

const mapStateToProps = (state) => {
    return {
        foodList: state.foodList
    }
};

现在我可以用 this.props.foodList

我想要做的是有一些单选按钮（全部，水果，蔬菜）。如果我单击该按钮，应该会显示正确的列表。简单（所有按钮 => 所有列表，水果按钮 => 水果列表）。

我该怎么做？

我尝试将 if 语句添加到 this.props.foodList.map(...)，但存在一些语法问题。我不需要再次从服务器检索数据。我怎样才能简单地做到这一点？

class someComponent extends Component {

constructor(props){
    super(props);
    this.state = {
       selectedIndex: 0
    }
}

render() {

   return(

    <RadioGroup
    selectedIndex={0}
    onSelect = { (index)=> this.setState({selectedIndex : index}) }
    >

        <RadioButton value={0}>
           <Text>All</Text>
        </RadioButton>

        <RadioButton value={1}>
           <Text>Fruits</Text>
        </RadioButton>

        <RadioButton value={2}>
            <Text>Vegetables</Text>
        </RadioButton>

    </RadioGroup>

    <View>
        <Text>Food List</Text>
        <List>
            {
                this.props.foodList.map((l, i) => (
                   <ListItem
                       key= {i}
                       title= {l.name}
                       subtitle = {l.type}
                   />
                ))
            }
        </List>
    </View>
)
}
}

Answer 1

不是存储 index，而是将 type 存储在 state 变量中，就像任何一种类型都将是 'all' or 'fruits' or 'vegetables'，像这样：

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

<RadioButton value='all'>
   <Text>All</Text>
</RadioButton>

<RadioButton value='fruits'>
   <Text>Fruits</Text>
</RadioButton>

<RadioButton value='vegetables'>
    <Text>Vegetables</Text>
</RadioButton>

通过这种方式，使用 map 和创建列表 dynamically.

将变得很容易

现在从 render 方法调用 function，这将 return 列表元素，如下所示：

<View>
    <Text>Food List</Text>
    <List>
      { this.renderList() }
    </List>
</View>

renderList(){
    return this.props.foodList.map((el, i) => {
        if(this.state.type == 'all' || el.type == this.state.type)
            return  <ListItem
                        key= {i}
                        title= {el.name}
                        subtitle = {el.type}
                    />
        else
          return null;
    })
}

Answer 2

存储选定的类型，然后使用 if 条件在地图中过滤掉

class someComponent extends Component {

    constructor(props){
        super(props);
        this.state = {
           selectedType: 'all',
        }
    }
    var typeMap = ['all', 'fruits', 'vegetables'];

    render() {

       return(

        <RadioGroup
        selectedIndex={0}
        onSelect = { (index)=> this.setState({selectedType : this.typeMap[index]}) }
        >

            <RadioButton value={0}>
               <Text>All</Text>
            </RadioButton>

            <RadioButton value={1}>
               <Text>Fruits</Text>
            </RadioButton>

            <RadioButton value={2}>
                <Text>Vegetables</Text>
            </RadioButton>

        </RadioGroup>

        <View>
            <Text>Food List</Text>
            <List>
                {
                    this.props.foodList.map((list, i) =>  {
                      if(this.state.selectedType === 'all' || this.state.selectedType === list.type )
                      return ( <ListItem
                           key= {i}
                           title= {l.name}
                           subtitle = {l.type}
                       />
                    )
                    else 
                      return null;
                  }      
                }
            </List>
        </View>
    )
    }

}

使用单选按钮在 react-native 中有条件列出的正确方法？

Proper way to conditional listing in react-native by using radio button?

reactjs

react-native

react-redux