javascript - 如何渲染动态数组并在数据更改时更新

Question

我想要渲染动态数组，并且需要在数据更改时自动更新。

我有一个每3秒自动生成3个数组的函数，我的目标是渲染3个生成的数组并每3秒自动更新它。

这是我的代码:

import React, { Component } from 'react';
import { render } from 'react-dom';

const response = new Array(4);

for (let i = 0; i < response.length; i++) {
    response[i] = [];
}

class App extends Component {
    constructor() {
        super();
        this.state = { response };
    }

    componentDidMount() {
        this.randData();
        setInterval(this.randData, 3000);
    }

    randData = () => {
        for (let i = 1; i <= 3; i++) {
            (function (i) {
                setTimeout(function () {
                    const arr = [];
                    const str = ['Boston','Florida','California','Alabama','Texas'];
                    const randStr = str[Math.floor(Math.random() * 5)];
                    const randNum = Math.floor(Math.random() * 100);
                    arr.push(i);
                    arr.push(randStr);
                    arr.push(randNum);
                    response[arr[0]] = arr;
                    console.log(arr);
                }, 200*i);
            })(i);
        }
    };

    render() {
        console.log(this.state.response);
        return (
            <div>
                {this.state.response.map((item, i) => (
                    <p key={i}>{item}</p>
                ))}
            </div>
        );
    }
}

render(<App />, document.getElementById('root'));

Demo

从上面的代码中，我在渲染数组数据时遇到问题。如果您尝试通过上面的链接运行演示，您将在页面中看不到任何内容。仅显示一个空白页面。

但是如果我检查并查看控制台然后刷新页面，则 console.log(this.state.response); 显示数组数据:

所以我认为我们在页面中看不到任何内容的问题并不是因为数组为空，而是因为我认为它有不同的问题。

我需要渲染数组数据并在数据更改时自动更新它。

谁能帮我解决这些问题吗？

Answer 1

我对您的代码做了一些更改，它按预期工作。请注意在 randData 中调用 setState 函数。 setState 使用更新的数据(存储在 state 中)重新渲染您的组件。

import React, { Component } from 'react';
import { render } from 'react-dom';

const response = new Array(4);


class App extends Component {
    constructor() {
        super();
        this.state = { response };
    }

    componentDidMount() {
        this.randData();
        setInterval(this.randData, 3000);
    }

    randData = () => {
        for (let i = 1; i <= 3; i++) {
            setTimeout(() => {
                    const arr = [];
                    const str = ['Boston','Florida','California','Alabama','Texas'];
                    const randStr = str[Math.floor(Math.random() * 5)];
                    const randNum = Math.floor(Math.random() * 100);
                    arr.push(i);
                    arr.push(randStr);
                    arr.push(randNum);
                    response[arr[0]] = arr;
                    this.setState({response})
                    console.log(arr);
                }, 200*i);
        }
    };

    render() {
        return (
            <div>
                {this.state.response.map((item, i) => (
                    <p key={i}>{item}</p>
                ))}
            </div>
        );
    }
}

render(<App />, document.getElementById('root'));