Question

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

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的错误我认为您在this函数中有正确的search。因此，您需要绑定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。

React - 无法读取属性＆＃39; state＆＃39;未定义的

3 个答案: