react中从后台获取到数据,点击一次加载往页面呈现10条数据,怎么实现?

react中从后台获取到数据,点击一次加载往页面呈现10条数据,怎么实现?,第1张

你获取到数据后,然后调用setstate方法,改变状态,然后你的组件要定义个接受状态改变的地方,比如value={this.state.*},一旦检测到你状态改变就会去render组件重新绘制,并且由于value的值和状态绑定所以value也会变。

react 本来就可以通过数据来对页面进行更新渲染。

我写了一个例子,你可以看下。我使用setInterval来模拟了数据的更新。

网页链接

import React, { Component } from 'react'

import { render } from 'react-dom'

import Hello from './Hello'

import './style.css'

class Test extends Component {

render() {

 return (

    <div>{this.props.data}</div>

    )

 }

}

class App extends Component {

    constructor() {

        super()

        this.data = 1

        this.state = {

            name: 'React'

        }

    }

    componentDidMount() {

        setInterval(() => {

        this.setState({ data: this.data++ })

        }, 2000)

    }

    render() {

        return (

            <div>

                <Hello name={this.state.name} />

            <p>

                Start editing to see some magic happen :)

            </p>

                <Test data={this.state.data} />

            </div>

        )

    }

}

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


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11954036.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存