Question

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

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

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

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

现在我可以通过this.props.foodList

使用它

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

我该怎么做？

我尝试将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

不是存储if (empty($email)) { $this->errors[] = Tools::displayError('Email is empty.'); $this->doLog('ERROR: Email/username is empty'); } elseif (!Validate::isEmail($email)) { $this->errors[] = Tools::displayError('Invalid email address.'); $this->doLog('ERROR: Invalid Email address'); }，而是将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方法调用function，这将render列表元素，如下所示：

return

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中条件列表的正确方法？

2 个答案: