Почему Ax ios не работает с последовательным возвратом eslint? - PullRequest
Новая
       5

Почему Ax ios не работает с последовательным возвратом eslint?

1 голос
/ 03 февраля 2020

Учитывая следующий код (учебник Ax ios get function), renderRedirect всегда вызывает ошибку согласованного возврата. Я изучил весь путь к коду для Ax ios. Мне кажется. 

class Dashboard extends Component {

  renderRedirect = () => {
    const user = JSON.parse(sessionStorage.getItem('user'));
    if (user === null) {
      console.log('in');
      axios.get('/user')
        .then((response) => {
          console.log(response.data);
          sessionStorage.setItem('user', JSON.stringify(response.data));
          if (response.data.type === 'investor') {
            console.log('go to startups'); // LINE 17
            return <Redirect to="/startups" />;
          }
          console.log('go to investors');
          return <Redirect to="/investors" />;
        })
        .catch(() => {
          console.log('go to investors');
          return <Redirect to="/investors" />;
        });
    } else if (user.type === 'investor') {
      console.log('go to startups');  // LINE 28
      return <Redirect to="/startups" />;
    } else {
      console.log('go to investors');
      return <Redirect to="/investors" />;
    }
  };

  render() {
    return (
      <div>
        {this.renderRedirect()}
      </div>
    );
  }
}

export default withRouter(Dashboard);

Почему это так?

Кроме того, глядя на консоль, я заметил, что обе строки 17 и 28 называются. Я что-то упускаю здесь?

enter image description here

Спасибо

1 Ответ

1 голос
/ 04 февраля 2020

В вашей ветке if (user === null) вы ничего не возвращаете, поскольку axios.get(...) является вашим последним утверждением.

Поскольку axios.get вернет Promise, вы не сможете сказать return axios.get в методе рендеринга, который ожидает синхронные результаты, как это делает React.

В таком случае вы должны использовать состояние (либо useState перехватывает, либо использовать setState) и устанавливать состояние для загрузки, пока вы пройдите через ax ios и, когда закончите, установите состояние для полученного результата (и верните Redirect вместо загрузчика).

Примерно так: 

const Dashboard = () => {
  const [redirect, setRedirect] = useState(null);
  useEffect(() => {
    const user = JSON.parse(sessionStorage.getItem('user'));
    if (user === null) {
      console.log('in');
      axios.get('/user')
        .then((response) => {
          console.log(response.data);
          sessionStorage.setItem('user', JSON.stringify(response.data));
          if (response.data.type === 'investor') {
            console.log('go to startups'); // LINE 17
            setRedirect("/startups");
          }
          console.log('go to investors');
          setRedirect("/investors");
        })
        .catch(() => {
          console.log('go to investors');
          setRedirect("/investors");
        });
    } else if (user.type === 'investor') {
      console.log('go to startups');  // LINE 28
      setRedirect("/startups");
    } else {
      console.log('go to investors');
      setRedirect("/investors");
    }
  }, []);
  return (
    <div>{redirect === null ? "Loading user.type" : <Redirect to={redirect} />}</div>
  );
}
...