Как вызвать setState с данными из реквизита?React Native - PullRequest
Новая
       69

Как вызвать setState с данными из реквизита?React Native

2 голосов
/ 02 мая 2019

У меня есть компонент Home, который вызывается после входа пользователя. На этом экране есть некоторые данные, а в заголовке у меня есть кнопка со значком, которая отправляет пользователя на экран, где пользователь может видеть данные своего профиля, а также удалить аккаунт. Поэтому, когда нажимается кнопка со значком, я отправляю данные, используя props.navigation, отправляя пользователя на другой экран / компонент. 

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

Внутри нового компонента я пытался установить setState внутри метода componentDidMount, используя эти данные, но он не работал. Я проверил, используя console.log данные там. Как я мог установитьState в этом случае? 

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",
  ...
  ...
}

1 Ответ

1 голос
/ 02 мая 2019

Похоже, вы пытаетесь отправить объект (user) в качестве параметра маршрута с библиотекой реагировать-навигацией .Это невозможно.

Правильный способ выполнения таких сценариев - отправить идентификатор пользователя userId в виде параметра маршрута и загрузить данные пользователя из вашего 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 && ...}

...