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

我收到此错误

TypeError：无法读取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' />)}

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

1 个答案: