react向数组中追加数据的方法


本文摘自PHP中文网,作者V,侵删。

具体方法如下:

(免费视频教程:react视频教程)

首先渲染一个随机数,使其每间隔一秒变换一次,效果如下:

f26550176bc653fe812e2628e23836f.png

代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

  <title>数组追加元素</title>

  <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>

  <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>

  <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

</head>

<body>

  

<div id="xpf"></div>

<script type="text/babel">

class Xpf extends React.Component {

  constructor(props){

    super(props);

    this.state = {

      random:Math.random()

    }

  }

   

  componentWillMount(){

    setInterval(() => {

      this.setState({

        random:Math.random()

      })

    }, 1000);

  }

  

  render() {

    let {random} = this.state;

      return (

        <div>

          <div>

            {random}

          </div>

           

        </div>

      );

  }

}

  

ReactDOM.render(

    <Xpf />,

    document.getElementById('xpf')

);

  

</script>

  

</body>

</html>

注意:组件更新有两种方式:props或state的改变,而改变state一般是通过setState()方法来的,只有当state或props改变,render方法才能再次调用,即组件更新

将生成的随机数放入一个数组,效果如下:

131c1daa73214d7d7386fafa6f86f61.png

代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

  <title>数组追加元素</title>

  <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>

  <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>

  <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

</head>

<body>

  

<div id="xpf"></div>

<script type="text/babel">

class Xpf extends React.Component {

  constructor(props){

    super(props);

    this.state = {

      random:Math.random(),

      arr:[1,2,3]

    }

  }

   

  componentWillMount(){

    setInterval(() => {

      this.setState({

        random:Math.random(),

        arr:[...this.state.arr,Math.random()]

      })

    }, 1000);

  }

  

  render() {

    let {random,arr} = this.state;

      return (

        <div>

          <div>

            {random}

          </div>

          <ul>

            {

              arr.map((item,index)=>{

                return ( <li key={index}>{item}</li>)

              })

            }

          </ul

        </div>

      );

  }

}

  

ReactDOM.render(

    <Xpf />,

    document.getElementById('xpf')

);

  

</script>

  

</body>

</html>

使用...this.state.arr将arr解构出来,再将随机数加进去

注意:不能使用 arr : this.state.arr.push(Math.random()),不能使用在原数组的基础上修改的方法,例如push之类,可以使用concat方法或者ES6数组拓展语法

相关推荐:js教程

以上就是react向数组中追加数据的方法的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

React grommet是什么

React-dom是什么

js数组学习之清空全部元素的4种方法(代码详解)

React jsx是什么

React中如何引入css样式

React下载文件有哪两种方式

React中state和props的区别有哪些?

React怎么添加背景图片

React中怎么获取state

安卓webviev支持React

更多相关阅读请进入《React》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...