React setStateは、変数に保存されたリストの最後の項目を返すだけです

Question

Reactの新機能です。現在、GitHub APIを使用してAJAX経由で検索結果を返し、その結果を画面に表示できる小さなプロジェクトを行っています。現在、私はforループを使用して応答データを反復処理し、そのデータを変数に保存していますが、これを行うにはより良い方法がありますが、私が新しく言ったように。私は返されたデータに状態を設定します。問題はsetStateにあり、変数全体にではなく変数に保存された最後の結果のみを返します。下に全コンポーネントが掲載されています。ヒントやアドバイスをいただければ幸いです。ありがとうございました！

import axios from 'axios'; 
import * as React from 'react'; 


class User extends React.Component<any, any> { 


    constructor(props: any) { 
     super(props); 
     this.state = { 
      name: name, 
      id: '', 
      userInput: '', 
      obj: null 
     }; 
    } 

    handleSubmit(e: any) { 
     axios.get('https://api.github.com/users/' + this.state.userInput + '/repos') 
      .then((response) => { 
       if (response.data.length > 0) { 
        console.log('success'); 
        let data1 = JSON.stringify(response.data); 
        let result = JSON.parse(data1); 
        for (let key in result) { 
         let obj = result[key]; 
         let test = obj.name; 
         console.log(test); 
         this.setState({ 
          name: name, 
          id: result[0].id, 
          obj: test, 
          userInput: this.state.userInput 
         }) 
        }; 

       } else { 
        console.log('else is working'); 
       } 
      }) 
      .catch((error) => { 
       console.log('error '); 
      }); 
    } 

    render() { 
     return (
      <div> 
       <form> 
        <input type="text" onChange={this.handleUserInput.bind(this)} value={this.state.userInput} /> 
        <h1>{this.state.userInput}</h1> 
        <button type="button" onClick={this.handleSubmit.bind(this)}>Submit</button> 
       </form> 
       <h1>Name : {this.state.name}</h1> 
       <h1> ID : {this.state.id}</h1> 
       <h1>OBJ : {this.state.obj}</h1> 
      </div> 
     ); 
    } 
} 

export default User; 

変数テストを慰めからの結果は、このコンソール出力 console output

を提供し、ここでwritten to page

示すように、しかし、それはthis.state.objによってOBJで設定されているときにのみ最後の項目が表示されています

Answer 1

setStateを呼び出すたびに、前の状態を上書きします。 Reactは、提供された（新しい）状態と以前の状態をインテリジェントにマージしようと試みますが、キーの衝突があれば、そのキーの前の状態は失われます。あなたがあなたの状態でのアイテムのリストをしたい場合は、

let items = []; 
for (...) { 
    items.push({ 
     name: name, 
     id: result[0].id, 
     ... 
    }); 
} 

this.setState({ items: items }); 

次のような何かを行う必要があるでしょう、あなたは@Tylerに追加this.state.items[someIndex]など

Answer 2

を使用して、リスト内の各項目にアクセスすることができますセバスチャンの答えは、あなたがこの

let items = []; 
for (let key in result) { 
    let obj = result[key]; 
    let test = obj.name; 
    console.log(test); 
    items.push({ 
     name: name, 
     id: result[0].id, 
     obj: test, 
     userInput: this.state.userInput 
    }); 
} 

this.setState({ items: items }); 

と、レンダリングのセクションを行うことができ、私はあなたがこれを行うことができると思います。

return (
     <div> 
      <form> 
       <input type="text" onChange={this.handleUserInput.bind(this)} value={this.state.userInput} /> 
       <h1>{this.state.userInput}</h1> 
       <button type="button" onClick={this.handleSubmit.bind(this)}>Submit</button> 
      </form> 
      {this.state.items.map((item) => { 
       <h1>Name : {item.name}</h1> 
       <h1> ID : {item.id}</h1> 
       <h1>OBJ : {item.obj}</h1> 
      })} 

     </div> 
    ); 

Answer 3

ご回答いただきありがとうございます。本当にありがとうございます。私はsetStateをforループ内で呼び出していたので、実際にはすべてのアイテムが表示されていましたが、分割されていて最後に停止するので、最後に表示されたように見えました。これで私はそれを修正したのです。

handleSubmit(e: any) { 
    axios.get('https://api.github.com/users/' + this.state.userInput + '/repos') 
     .then((response) => { 
      if (response.data.length > 0) { 
       console.log('success'); 
       let data1 = JSON.stringify(response.data); 
       let result = JSON.parse(data1); 
       let list = ''; 
       for(let i of result) { 
        list += i.name + ' '; 
       } 
       console.log(list); 
       this.setState({ 
        name: result[0].name, 
        id: result[0].id, 
        obj: list, 
        userInput: this.state.userInput 
       }) 

      } else { 
       console.log('else is working'); 
      } 
     }) 
     .catch((error) => { 
      console.log('error '); 
     }); 
} 

は間違いなくこれを行うための最善の方法ではありませんが、少なくともそれが働いていると私はそれを改善するに向けて作業することができます。すべての助けをありがとう！