使用项目数组中的数据作为 Picker.Item REACT NATIVE

Question

我有这个选择器：

<Picker
    style={{ width: "100%" }}
    mode="dropdown"
    selectedValue={move.client}
    onValueChange={this.handleChange("client")}
>
    {this.state.clients !== "" ? (
    this.state.clients.map(client => {
        <Picker.Item label={client.name} value={client.id} />;
    })
    ) : (
        <Picker.Item label="Loading..." value="0" />
    )}
</Picker>

我无法使 Picker.items 成为我想要的数组。它的工作原理就像在 React JS 中一样，但我不能让它在这里工作。

这就是我从数据库获取 Clients 数组的方式：

componentDidMount() {
        axios
            .get(`${API_URL}/clients`)
            .then(response => {
                this.setState({ clients: response.data });
            })
            .catch(error => console.log(error));
    }

我收到此错误

类型错误：无法读取 null 的属性“props”

它似乎呈现了选择器，但是当我从数据库获取数据时，它崩溃了并且出现此错误。我只是找不到我做错了什么......

Answer 1

请记住，您必须将函数传递给

array.map

，并且函数不能有像

<Picker.Item label={client.name} value={client.id} />;

这样的语句。您应该在之前添加一个 return 语句。以下是正确的：

<Picker
    style={{ width: "100%" }}
    mode="dropdown"
    selectedValue={move.client}
    onValueChange={this.handleChange("client")}
>
    {this.state.clients !== "" ? (
        this.state.clients.map(client => {
            return <Picker.Item label={client.name} value={client.id} />;
        })
    ) : (
        <Picker.Item label="Loading..." value="0" />
    )}
</Picker>

而且，似乎存在混淆

this.state.clients !== ""

（看到上面的评论并想到回答它）。 您可以将其与类中

this.state

函数内的

constructor(props)

初始化方式进行比较。

例如：

如果你的代码是这样的：

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

那么你应该：

{this.state.clients !== {} ? (<Picker.Item />):(<Picker.Item label='loading' />)}

或者如果你的代码是这样的：

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

那么你应该：

{this.state.clients !== '' ? (<Picker.Item />):(<Picker.Item label='loading' />)}

Answer 2

尝试这个轻量级且完全可定制的包rn-multipicker

完整文章：https://dev.to/rahul04/add-multi-select-dropdown-to-react-native-applications-53ef

import { RNMultiSelect } from 'rn-multipicker';

const COUNTRIES = [
"Afghanistan",
"Albania",
"Algeria",
"American Samoa",
"Andorra",
"Angola",
"Anguilla",
"Antarctica",
"Antigua and Barbuda",
"Argentina",
];

const App() {
  const [selectedItems, setSelectedItems] = useState<string[]>([]);

  return (
    <View style={{flex: 1}}>
       <RNMultiSelect placeholder="Countries" data={COUNTRIES} onSelectedItemsChange={(value) => setSelectedItems(value)} selectedItems={selectedItems} />
    </View>
  );
} 

Linkedin 帖子