import React,{ Component } from 'react';

function NumberList (props) {
    console.log('props',props);
}

class Keys extends Component {
    render() {
        const numbers = [2,4,6,8];
        return (
           <div>
               <NumberList numbers={ numbers }/>
           </div>
        )
    }
}

export default Keys;

写了一段代码，突然报这鬼错误。尤其在特别累的时候，很难排查到原因何在，但还是要排查。
在遇到代码错误时，先看报错的提示，再看代码。

The above error occurred in the <NumberList> component:
    in NumberList (at keys.js:18)
    in div (at keys.js:16)
    in Keys (created by Route)
    in Route (at router.js:38)
    in div (at router.js:24)
    in Router (created by BrowserRouter)
    in BrowserRouter (at router.js:23)
    in RouterMap (at App.js:18)
    in div (at App.js:17)
    in App (at index.js:25)

这段错误，没有看出什么，那就往下看。

Uncaught Error: NumberList(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

从这段报错中，我们是不是可以找到问题呢。
这句话的大致意思就是：

在render中没有返回值，这通常意味着返回值丢失。或者为了不渲染任何内容，而返回空。

这下应该一目了然了吧！原来是我忘记return了。(是在NumberList这个组件中没有return)
看下面代码

import React,{ Component } from 'react';

function NumberList (props) {
    console.log('props',props);
    let numbers = props.numbers;
    return (
        <ul>
            { 
                numbers.map((item,index)=>{
                    return (
                        <li key={ index }>{ item }</li>
                    )
                })
            }
        </ul>
    )
}
class Keys extends Component {
    render() {
        const numbers = [2,4,6,8];
        return (
           <div>
               <NumberList numbers={ numbers }/>
           </div>
        )
    }
}

export default Keys;

这里还发现一个新问题

为什么右边一直在打印props？？？
正在研究中……