React - getDerivedStateFromProps和axios

Question

我想将状态变量books设置为API的结果。我不能在componentDidMount中做这件事，因为我一开始没有token，需要它才能从API中获取结果。当我运行下面的代码时，状态books没有发生任何变化。如果我将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",
}

在render方法中，我使用this.static.books数据调用component。

你能给我提个建议吗？

Answer 1

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

恐怕您不能对这样的异步代码使用getDerivedStateFromProps。然而，你不必这样做，因为react是，嗯，反应性的。

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