React里面的componentDidMount()钩子函数用法

Posted lc123456

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React里面的componentDidMount()钩子函数用法相关的知识，希望对你有一定的参考价值。

 1 <body>
 2     <div id="root">
 3         
 4        </div>
 5     <script type="text/babel">
 6         class Box extends React.Component {
 7             constructor(props) {
 8                 super(props)
 9                 this.state = {
10                     num : 2,
11                     bool: true,
12                     list:[]
13                 }
14             }
15 
16             componentDidMount(){
17                   axios.get("data.json").then((res)=>{
18                       this.setState({
19                         list:res.data.data
20                       })
21                   })
22             }
23             
24             render() {
25                 return (
26                     <div>
27 
28                         <table  border="1">
29                             <thead>
30                                 <tr>
31                                     <td>ID</td>
32                                     <td>名字</td>
33                                 </tr>
34                             </thead>
35                             <tbody>
36                                 {
37                                     this.state.list.map((ele,index)=>{
38                                         return (
39                                                 <tr key={index}>
40                                                     <td>{ele.id}</td>
41                                                     <td>{ele.name}</td>
42                                                 </tr>
43                                             )
44                                         })
45                                 }
46                                
47                             </tbody>
48                         </table>
49                     </div>
50                 )
51             }
52         }
53         ReactDOM.render(
54             <Box></Box>,
55             document.getElementById("root")
56         )
57     </script>
58 </body>

以上是关于React里面的componentDidMount()钩子函数用法的主要内容，如果未能解决你的问题，请参考以下文章

react 子组件获取父组件传来的 props 问题

为啥 componentDidMount 在 react.js 和 redux 中被多次调用？

React componentDidMount

Apollo + React：数据未出现在 componentDidMount 生命周期中

React componentDidMount() 初始化状态

async/await 不适用于 ComponentDidMount 中的 react.js