Refre sh Страница при входе - PullRequest
Новая
       3

Refre sh Страница при входе

0 голосов
/ 23 марта 2020

В настоящее время я создал функциональную страницу входа. После входа в систему я получаю данные с помощью componentDidmount () для анализа информации о пользователе (name, et c.)

. При входе в систему я в настоящее время использую Redirect с реактивного маршрутизатора; однако это не обновит sh страницу.

Каков наилучший способ не использовать перенаправление и перезагрузить страницу после входа в систему? Таким образом, моя информация может быть получена из componentDidMount ().

Я также использовал ComponentWillReceieveProps, но он также не подходит для того, что мне нужно для кода

Спасибо!

Попытка: 

From Login.js

const { error, loading, token } = this.props;
    const { username, password } = this.state;
    if (token) {
      return <Redirect to="/home" />
    }


from ArticleView.js:

    axios.get('...') {
    ...
    }



  from Forms2.js:


componentWillReceiveProps(newProps){
       console.log(newProps)
       if (newProps.token !== this.props.token) {
         authAxios.get("user")
         .then(res =>{
           this.setState({id: res.data.id});
           this.setState({username:res.data.username});
         });
       }
       console.log(newProps.token)
     };

1 Ответ

0 голосов
/ 23 марта 2020

Зачем менять весь поток компонентов вместо того, чтобы выбрать правильный метод жизненного цикла?

Кстати, ComponentWillReceieveProps() скоро будет объявлено устаревшим, если оно еще не устарело, так как это давало слишком много головной боли для Реактивная команда. Он был заменен методом stati c - getDerivedStateFromProps().

Небольшая разница между этим и ComponentWillReceieveProps() в том, что, будучи методом stati c, вы не сможете использовать this.

Подробнее об этом здесь .

Я попытался преобразовать ваш компонент в getDerivedStateFromProps(). Но было слишком много сложностей, поскольку this, prevProps и async/await не могут быть использованы в нем.

Более простым решением было бы использование React Hooks 

const Login = ({ error, loading, token }) => {
  const [username, setUsername] = React.useState();
  const [id, setId] = React.useState();
  const [password, setPassword] = React.useState();

  React.useEffect(() => {
    authAxios.get("user")
      .then(res =>{
        setId(res.data.id);
        setUsername(res.data.username);
      });
   }, [token]) 
// UseEffect hooks will run if React detects
// changes in props.token
}

Hope это помогает

...