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

因此，我试图通过直接指定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()函数中获取数据后以状态存储每个特定值，则可以显示数据，但是如果说我数组中有很多数据，则必须设置他们每个人都处于一种状态，我想避免这样做。

Answer 1

您的render需要考虑到这样的事实：可以在this.state.user为null时调用它，并在这种情况下显示适当的显示，因为您的组件将没有{{ 1}}，直到/除非异步操作完成。例如：

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通常是维护麻烦。考虑改用类。

注释2：大概style可能会失败。您应该在上面有一个loadUserDetail处理程序来处理失败。

访问JSON对象中的子值react native

1 个答案: