使用单选按钮在 react-native 中进行条件列表的正确方法？答案

【问题标题】：Proper way to conditional listing in react-native by using radio button?使用单选按钮在 react-native 中进行条件列表的正确方法？
【发布时间】：2017-04-10 08:57:49
【问题描述】：

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

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

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

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>
)
}
}

【问题讨论】：

标签： reactjs react-native react-redux

【解决方案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;
    })
}

【讨论】：

【解决方案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>
    )
    }

}

【讨论】：