时间戳

首页 > 解决方案 > 如何使用来自道具的数据调用 setState？反应原生

javascript - 如何使用来自道具的数据调用 setState？反应原生

问题描述

我有一个 Home 组件，在用户进入后调用。该屏幕中有一些数据，在标题中我有一个图标按钮，用于向用户发送一个屏幕，用户可以在其中查看他们的个人资料数据并删除帐户。因此，当单击图标按钮时，我正在使用 发送数据props.navigation，将用户发送到另一个屏幕/组件。 

profile = () => {
        const { navigation } = this.props;
        const user = navigation.getParam('user', 'erro');
        this.props.navigation.navigate('profileScreen', { user: user });
    }

在新组件内部，我尝试componentDidMount使用该数据在方法内部设置状态，但没有成功。我用console.log数据检查了那里。在这种情况下我怎么能 setState 呢？ 

export default class profileScreen extends Component {
    static navigationOptions = {
        title: "Profile"
    };

constructor(props) {
    super(props);
    this.state = {
        user: {}
    }
}

componentDidMount() {
    const {navigation} = this.props;
    const user = navigation.getParam('user', 'Erro2');
    this.setState({user: user.user});
    console.log(this.state); // Object {"user": Object {},}
    console.log("const user");
    console.log(user.user); //my actual data is printed
}

render() {
    return (
        <Text>{this.state.use.name}</Text>
        <Text>{this.state.use.age}</Text>
        <Text>{this.state.use.email}</Text>
        ...
        ...
    )
}

}

来自 console.log(this.state) 的结果

Object {
  "user": Object {},
}

来自 console.log(user) 的结果

Object {
  "createdAt": "2019-04-27T21:21:36.000Z",
  "email": "sd@sd",
  "type": "Admin",
  "updatedAt": "2019-04-27T21:21:36.000Z",
  ...
  ...
}

标签： javascriptreact-nativenavigationsetstatereact-props

解决方案

似乎您正在尝试使用react-navigation库将对象 ( user) 作为路由参数发送。这是不可能的。

执行此类场景的正确方法是将用户的 iduserId作为路由参数发送并从您的 API（或状态）加载用户详细信息。 

profile = () => {
        const user = {id: 10 /*, ... rest of properties */}; // or take it from your state / api
        this.props.navigation.navigate('profileScreen', { userId: user.id });
    }



componentDidMount() {
    const {navigation} = this.props;
    const userId = navigation.getParam('userId', 'Erro2');
    // const user = read user details from state / api by providing her id
    this.setState({user: user});
}

ps：如果您正在使用像 redux/flux/... 这样的状态管理，请考虑currentUser在您的全局状态中设置并阅读它，而不是将 userId 作为路由参数传递。

为了确保当用户在状态渲染方法中获得新值时组件更新应该是这样的：

render() {
    const {user} = this.state
    return (
      <View>
        {user && <Text>{user.name}</Text>}
        {user && <Text>{user.age}</Text>}
        {user && <Text>{user.email}</Text>}
        ...
        ...
     </View>
    )
}

注0：const {user} = this.state可以避免你重复this.state

<Text>注意1：将所有这些组件包装在另一个组件中<View>以防止重复条件短语会更加优雅{user && ...}

推荐阅读