javascript - 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;

consoling 变量 test 的结果给出了这个控制台输出 console output

然而，当它通过 this.state.obj 在 obj 中设置时，它只显示最后一项，如此处所示 written to page

Answer 1

每次调用 setState 时，都会覆盖之前的状态。 React 尝试智能地合并提供的(新)状态和之前的状态，但是如果有任何键冲突，之前的状态(那个键的)将会丢失。如果你想要一个你所在州的项目的列表，你必须做类似的事情

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

this.setState({ items: items }); 

接下来，您可以使用 this.state.items[someIndex] 等访问列表中的每个项目