javascript - React - getDerivedStateFromProps 和 axios

Question

我想将状态变量 books 设置为 API 的结果。我无法在 componentDidMount 中执行此操作，因为我一开始没有 token ，需要它从 API 获取结果。当我运行以下代码时，状态books没有任何反应。如果我在 return 之前放置 state.books=res.data 我会得到结果，但在手动刷新页面之后。

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

这是一个非常常见的陷阱:您在 Promise 处理程序 (then) 中返回某些内容，并认为该内容将从创建 Promise 的函数中返回 (getDerivedStateFromProps )。事实并非如此。

恐怕您不能将 getDerivedStateFromProps 用于这样的异步代码。但是，您不必这样做，因为 react 是，嗯， react 性的。

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