TypeError undefined is not iterable (cannot read property Symbol(Symbol.iterator))

今天在学习react Hooks使用时，因为自己粗心大意，写了一个非常傻的一句代码，导致了react 报错

TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

最后找了十分钟，浪费了时间
切记切记 ，不要再烦
下面我来说了这个简单的特别啥的bug
我们都知道react 去年出了 Hooks ，但是之前一直用vue开发，很少使用过react。最近公司接了个react项目，没办法，只能在学习一下，最后发现react Hooks，真的是个好东西。
我先说下我的错误产生原因吧

const [age, setAge] = useState[18]

上面就是一个简单的使用useState 包裹变量的方法，错误就发生在这里，我竟然在后面写的是[],而不是(),然后就报错了，一定一定要仔细啊
那么正确的写法就是

const [age, setAge] = useState(18)

下面我就简单来说下，Hooks 的useState 以及 useEffect
useState 比较简单
For example

import React,{useEffect,useState} from 'react';  // 首先进行个引入

// 下面我们就来就行个生命
// 下面这个写法就是es6提供的数组解构 的写法，非常方便
// 这个是声明了一个年龄的number以及操作的一个方法，useState 后面包裹的是age的默认值
const [age, setAge] = useState(18) 
// 下面声明对象的 例子 ，跟上面单独声明差不多，同样可以设置默认值
const [user, setUser] = useState({name: 'Jack', sex: '男';})

// 我们在页面就可以这样进行一个使用
 return(
	<div>
			<p>我的名字：{user.name}</p>
            <p>我的性别：{user.sex}</p>
            <p>我的年龄：{age}</p>
	</div>
)

页面可以正常显示

如果你想改变值的话可以调用数组的第二项来进行改变

// 比如 我想改变性别
			<button onClick={()=>{setAge(age+1)}}>年龄 +1</button> <br />
            <button onClick={()=>{setAge(age-1)}}>年龄 -1</button> <br />
            /* 注意事项：
					无局部更新能力
	
					如果state是一个对象，能否部分setState？
					答案是不行，因为setState不会帮我们合并属性
					那么useReducer会合并属性吗？也不会！
					因为React认为这应该是你自己要做的事情
			*/

然后说下useEffect 副作用，这个可以当成我们的生命周期函数来使用

For example

function List() {
    useEffect(() => {
        console.log(`老弟你来了，List`);  // 这里可以当成 componentDidUpdate 使用，可指定依赖
        return () => {
            console.log(`老弟你走了 List`);   // return 可以当成 componentWillUnmount 使用
        }
    }, []) // 第二个参数为[]可以当成 componentDidMount 使用
    return (
        <div>
            <p>List 页面</p>
        </div>
    )
}

这样在控制台会进行一个输出

好了下面附上我的demo的源码

import React,{useEffect,useState} from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import './App.css'
function Index() {
    useEffect(() => {
        console.log(`老弟你来了，index`);
        return () => {
            console.log(`老弟你走了 index`);
        }
    }, [])
    return (
        <div>
            <p>index 页面</p>
        </div>
    )
}
function List() {
    useEffect(() => {
        console.log(`老弟你来了，List`);
        return () => {
            console.log(`老弟你走了 List`);
        }
    }, [])
    return (
        <div>
            <p>List 页面</p>
        </div>
    )
}
function Home() {
    const [age, setAge] = useState(18)
    const [user, setUser] = useState({name: 'Jack', sex: '男'})
    useEffect(() => {
        console.log(`老弟你来了，Home`);
        return () => {
            console.log(`老弟你走了 Home`);
        }
    }, [])
    function changeSex(){
        let fcSex = user.sex==='男'?'女':'男'
        setUser({
            ...user,
            sex:fcSex
        })
    }
    return (
        <div className='myDiv'>
            <p>我的名字：{user.name}</p>
            <p>我的性别：{user.sex}</p>
            <p>我的年龄：{age}</p>
            <button onClick={()=>{setAge(age+1)}}>年龄 +1</button> <br />
            <button onClick={()=>{setAge(age-1)}}>年龄 -1</button> <br />
            <button onClick={changeSex}>改变性别</button>
            <Router>
                <ul>
                    <li> <Link to='/' >首页</Link> </li>
                    <li> <Link to='/List' >list</Link> </li>
                </ul>
                <Route path='/' exact component={Index} />
                <Route path='/List' exact component={List} />
            </Router>
        </div>
    )
}
export default Home