Используйте данные из массива элементов как Picker.Item REACT NATIVE - PullRequest
Новая
       31

Используйте данные из массива элементов как Picker.Item REACT NATIVE

0 голосов
/ 24 июня 2019

У меня есть этот сборщик: 

<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: Невозможно прочитать свойство 'props' со значением null

Кажется, что оно отображает средство выбора, но когда я получаю данные из моей БД, оно просто падает иЯ получаю эту ошибку.Я просто не могу понять, что я делаю неправильно ...

1 Ответ

1 голос
/ 24 июня 2019

Помните, что вы должны передать функцию в array.map, и функция не может иметь такой оператор, как <Picker.Item label={client.name} value={client.id} />;.Вы должны добавить инструкцию возврата раньше.Ниже приведено правильное: 

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