Question

我是React和javascript的新手。我想从服务器接收数据并在前端渲染它。我得到的数据是数组形式，所以我遍历数据将其保存到数组，然后循环回数组以呈现无序列表中的元素。当我在console.log（）数据时，它会显示我收到的内容，但是当我在console.log（）时，它显示的数组长度为0并且不会添加我收到的数据。如果有任何线索，请回复。任何帮助都会非常感激。谢谢

constructor(){
    super();
    this.notes = [];
}

componentDidMount() {
    axios.get('http://localhost:4000/getnotes')

    .then(response =>{
        response.data.forEach((note)=>{
                console.log(note.title), 
                this.notes.push(note) // something isn't quite right here
            }
        )
    });
    console.log(this.notes.length);
}
render(){
    return(
        <div>
            <ul><li>default li</li>
                {
                    this.notes.map((note)=>{
                        return(
                            <li>
                                {note.title}
                            </li>
                        );
                    })
                }
            </ul>
        </div>
    );
}

Answer 1

从服务器收到的数据本质上是异步的，因此您在发送ajax请求后无法立即看到this.notes.length

我建议您在状态下存储来自服务器的结果，并在状态更改时让React更新DOM，更新代码如下：

constructor(){
    super();
    // this.notes = [];
    this.state = {
        notes: []
    }
}

componentDidMount() {
    axios.get('http://localhost:4000/getnotes')

    .then(response =>{
        this.setState({
            notes: response.data
        });
        //response.data.forEach((note)=>{
        //      console.log(note.title), 
        //      this.notes.push(note) // something isn't quite right here

        //}
        //)
    });
    console.log(this.notes.length);
}
render(){
    return(
        <div>
            <ul><li>default li</li>
                {
                    this.state.notes.map((note)=>{
                        return(
                            <li>
                                {note.title}
                            </li>
                        );
                    })
                }
            </ul>
        </div>
    );
}

Answer 2

我建议将笔记放在组件的状态中，并使用setState更新它。

Array.push方法不起作用

2 个答案: