访问 JSON 对象中的子值反应原生答案

【问题标题】：Access the child value in JSON Objects react native访问 JSON 对象中的子值反应原生
【发布时间】：2018-11-07 08:28:07
【问题描述】：

我有这个函数可以在下面的代码中获取用户数据。

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

所以我试图通过直接指定 this.state.user.company_name 之类的对象来在我的 render() 中显示这些数据，但它不起作用。

这是我的渲染效果：

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() 函数中的数据后将每个特定值存储在一个状态中，我就能够显示数据，但是如果假设我的数组中有很多数据，那么我必须设置每个他们中的一个处于某种状态，我想避免这样做。

【问题讨论】：

FWIW：JSON 是一种用于数据交换的文本表示法。 (More here.) 如果您正在处理 JavaScript 源代码，而不是处理 string，那么您就不是在处理 JSON。

标签： json object react-native

【解决方案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 处理程序来处理失败。

【讨论】：