Реагировать - getDerivedStateFromProps и axios

Question

Я хотел бы установить переменную состояния books как результат API. Я не могу сделать это в componentDidMount, потому что у меня нет токена в начале, и он мне нужен для получения результата от API. Ничего не происходит с состоянием books, когда я запускаю следующий код. Если я поставлю state.books=res.data перед возвратом, я получу результат, но после ручного обновления sh page.

constructor(props) {
        super(props);
        this.state = {
            books: [],
        };
    }

и

static getDerivedStateFromProps(nextProps, state) {
        if (nextProps.token){
            axios.defaults.headers = {
                "Content-Type": "application/json",
                Authorization: "Token " + nextProps.token
            }
            axios.get('http://127.0.0.1:8000/api/book/own/')
                .then(res => {
                    return {
                        books: res.data,
                    }  
                }) 
       }

данные из API выглядят так:

{
  id: 66,
  isbn: "9780545010221",
  title: "Title",
  author: "Author,Author",
}

В методе рендеринга я вызываю компонент с данными this.static.books.

Не могли бы вы дать мне совет?

Answer 1

Это очень распространенная ошибка: вы возвращаете что-то внутри обработчика обещания (then), думая, что это вернется из функции, которая создала обещание (getDerivedStateFromProps). Это не так.

Боюсь, вы не можете использовать getDerivedStateFromProps для такого асинхронного кода, как этот. Тем не менее, вам не нужно, учитывая, что реакция, хм, реактивная.

componentDidUpdate() {
  if (this.props.token) {
    axios.get('http://127.0.0.1:8000/api/book/own/')
      .then(res => this.setState({books: res.data})) ;
  }
}