Question

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

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

在新组件内部，我尝试使用该数据在方法componentDidMount中设置setState，但此方法不起作用。我使用console.log检查了数据。在这种情况下，如何设置状态？

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（用户）的结果

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

Answer 1

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

执行此类方案的正确方法是将用户ID userId发送为route parameter，并从您的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

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

会更加优雅

如何使用props的数据调用setState？反应本机

1 个答案: