使用项目数组中的数据作为 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 中的工作方式与 React JS 中的一样，但我无法在此处使用它。

这就是我从我的数据库中获取客户端数组的方式：

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

我收到这个错误

TypeError: Cannot read property 'props' of null

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

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 !== "" （看到你上面的评论，想到回答）。您可以将它与您在 class.

中的 constructor(props) 函数中初始化 this.state 的方式进行比较

例如：

如果您的代码如下：

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

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

Use data from array of items as Picker.Item REACT NATIVE

arrays

picker

react-native