Доступ к дочернему значению в JSON Объекты реагируют на нативные

Question

У меня есть эта функция для извлечения пользовательских данных, таких как в коде ниже.

constructor(props){
    super(props);
    this.state = { 
        user_id: this.props.navigation.state.params.user_id, 
        user: null 
    }
}

componentWillMount(){
    this.loadUserDetail()
}

loadUserDetail(){
    AccountController.loadUserDetail(this.state.user_id).then(data=>{
        if(data.status == true){
            this.setState({ user: data.user })
        }
    })
}

Из функции loadUserDetail() я устанавливаю пользовательские данные в состояние, и результат this.state.user выглядит следующим образом:

{ company_name: 'Universal Sdn Bhd', address: 'test', company_desc: 'test' }

Итак, я пытаюсь отобразить эти данные в моем render (), напрямую указав объект типа this.state.user.company_name, но он не работает.

Вот как выглядел мой рендеринг:

render() {
    return (
        <View style={{flex: 1}}>
            <Text style={{ fontSize: 20, fontWeight: 'bold' }}>{ this.state.user.company_name }</Text>
        </View>
    )
}

Отображение данных, как в коде, выдает эту ошибку

TypeError: null не является объектом (оценивается как this.state.user.company_name)

Я могу отображать данные, если я сохраняю каждое конкретное значение в состоянии после извлечения данных в функции loadUserDetail(), но если, скажем, у меня много данных в моем массиве, тогда я должен устанавливать каждый из них из них в состоянии, и я хочу избежать этого.

Answer 1

Ваш render должен учитывать тот факт, что он может быть вызван, когда this.state.user равен null, и отображать соответствующий дисплей для этого случая, так как ваш компонент не будет иметь user до / без асинхронного операция завершена. Например:

render() {
    const { user } = this.state;
    return (
        <View style={{flex: 1}}>
            {user
            ?  <Text style={{ fontSize: 20, fontWeight: 'bold' }}>{ user.company_name }</Text>
            :  <Text style={{ fontSize: 20, fontStyle: 'italic' }}>loading</Text>
            }
        </View>
    )
}

Если вы не хотите, чтобы ваш компонент отображал состояние ожидания, когда у него нет user, вызов для загрузки пользователя должен быть вместо этого в родительском компоненте, и он должен отображать дочерний элемент только тогда, когда пользователь известен (передает его как реквизит).

---

Примечание: Встроенный style - это, как правило, хлопоты по обслуживанию. Попробуйте вместо этого использовать классы.

Примечание 2: Предположительно, loadUserDetail может дать сбой. У вас должен быть обработчик catch, чтобы справиться с ошибкой.