React to setStateでfetch（）APIを使用する方法

エラーメッセージは、問題が何であるかを正確に示しています。

未定義の状態を設定できません

そのsetStateため、その時点では存在しないオブジェクトのメソッドとして呼び出しを試みています。どのオブジェクトのプロパティsetStateとして、メソッドとして呼び出そうとしていますか？

this.setState（{apiInfo：jsonStr}）;

はい、それthisが問題です。あなたがそれを呼び出そうとしている時点で-すなわち.then()、fetch呼び出しの内部-thisは実際には未定義です。これはChromeDevtoolsで確認できます。

私はそれthisがJavaScriptの滑りやすい顧客だと思います。その値は、アプリの現在のコンテキストに応じて変化する可能性があります（実際に変化します）。

これを回避する方法はいくつかあります。少し不格好な（しかしそれは機能します！）方法の1つはthis、.fetch（）呼び出しを入力する前に値をキャプチャし、それを別の変数に割り当てることです。あなたは、多くの場合、表示されますthatまたはself変数は、この目的のために使用されるが、彼らはただの慣習です。変数は好きなように呼び出すことができます。

これが、componentDidMount（）メソッドをにキャプチャthisしthat、：that内で呼び出すように作り直した方法です.then()。

componentDidMount() {
    const that = this;
    fetch("https://fcctop100.herokuapp.com/api/fccusers/top/recent")
        .then(function(response) {
            return response.json();
        })
        .then(function(jsonData) {
            return JSON.stringify(jsonData);
        })
        .then(function(jsonStr) {
            that.setState({ apiInfo: jsonStr });
            console.log(jsonStr);
        });
}

矢印関数の使用に慣れている場合、別の方法は、次のように「通常の」関数呼び出しを1つに置き換えることです。

.then(jsonStr => {
    this.setState({ apiInfo: jsonStr });
    console.log(jsonStr);
});

矢印関数thisは常にthisその親が定義したものです。