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

然而，当它通过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]等

访问列表中的每个项目

Answer 2

添加@Tyler Sebastian回答，你可以这样做

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

感谢您的回答和提示，我非常感谢。最后发生的事情是，因为我在for循环中调用了setState，它实际上显示了所有项目但是它在瞬间停止并且在最后停止，所以看起来好像它只显示了最后一个。这就是我最终解决它的方法。

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 ');
        });
}

绝对不是最好的方法，但至少它是有效的，我可以努力改善它。非常感谢所有的帮助！

React setState仅返回保存到变量的列表中的最后一项

3 个答案: