Question

React-无法读取未定义的属性“state”

2017-08-14

3315

reactjs

尽管在使用 setState 时使用了粗箭头函数绑定 this 的上下文，但我仍不断收到此错误。有人可以帮忙吗？

export default class App extends Component {

constructor(props) {
    super(props);
    this.state = {
        query: '',
        items: [],
        repos: []
    };
}

search(term) {
    this.setState({
        query: term
    });
    const clientId = '12489b7d9ed4251ebbca';
    const secret = 'ff53ac9a93aaa9e7cddc0c009d6f068302866ff2';

    function fetchUser() {
        return axios.get(`https://api.github.com/users/${this.state.query}/repos?client_id=${clientId}client_secret=${secret}`);
    }

    function fetchRepos() {
        return axios.get(`https://api.github.com/users/${this.state.query}?client_id=${clientId}client_secret=${secret}`);
    }

    axios.all([fetchUser(), fetchRepos()])
        .then(axios.spread((items, repos) => {
            this.setState({
                items: items.data,
                repos: repos.data

            });
            console.log(state);
        }));

}

Answer 1

从错误消息中可以清楚地看出 this 未定义。这可能是因为您在 search() 中使用它，而 search() 未绑定到组件，使得 this 完全没有意义。要解决此问题，请尝试在构造函数末尾添加此行：

        this.search = this.search.bind(this);

现在您应该能够在搜索函数中使用 this 。

Answer 2

setState 不是同步的。如果您想在设置状态后使用状态值，则必须在对象之后在 setState 内提供回调。

我会这样做：

onSearch(term) {
  this.setState({ query: term }, () => {
    console.log(this.state.query);
    this.search();
  });
}

search() {
  // now you can be sure, that this.state.query is set and use it.. 

  // Use arrow functions, as they will reuse the parent scope.
  const fetchUser = () => {

  }
}

Answer 3

如果 fetchUser 出现错误，我认为您在 search 函数中正确使用了 this 。因此，您需要绑定 fetchUser 和 fetchRepos ：

const fetchUser = () => {
        return axios.get(`https://api.github.com/users/${this.state.query}/repos?client_id=${clientId}client_secret=${secret}`);
    }

或

const fetchUser = function(){
        return axios.get(`https://api.github.com/users/${this.state.query}/repos?client_id=${clientId}client_secret=${secret}`);
    }.bind(this);

对于 fetchRepos 也一样。