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

我对您的代码进行了一些更改，并且按预期运行。请注意，在setState内部调用了randData函数。 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'));

数据更改时如何呈现动态数组和更新

1 个答案: