React - 未定義のプロパティ 'state'を読み取ることができません

Question

太字のArrow関数を使用してもこのエラーが発生しますが、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からのエラーは私はあなたがsearch機能で正しいthisを持っていると思われる場合。

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のために：だから、fetchUserとfetchReposをバインドする必要があります。