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

Question

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

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

在新组件中，我尝试使用该数据在方法 componentDidMount 中设置状态，但没有成功。我使用 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

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

执行此类场景的正确方法是将用户 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？反应本机

How to call a setState with data from props? React Native

javascript

navigation

setstate

react-native

react-props