我在学习React等一系列产物中遇到的那些坑

1. ref在函数组件中不能使用的问题

报错：

Error: Function components cannot have refs. Did you mean to use React.forwardRef()?

其实也用不上什么React.forwardRef()，接一个回调函数就可以了。

let input = null;
    function clickHandler () {
        if (input !== null) {
            if (input.value !== "") {
                dispatch(addTodo(input.value));
            }
        }
    }
    return (
        <div>
            <input type="text" ref={node => {input = node}/>
            <button onClick={clickHandler}>ADD</button>
        </div>
    )

2. 循环触发setState()

这是在学习redux时遇到的错误。
报错：

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

其实是在你绑定的事件上你绑定的不是一个函数，而是一个函数的执行，因此当组件被渲染时，它就执行了，执行就可能改变state，从而触发setState，然后又改变又触发。

<Todo
    key = {`${index}`}
    text = { todo.text }
    finished = { todo.finished }
    onClick = {onTodoClick(todo.id)}
/>

这里应该写成

onClick = {() => onTodoClick(todo.id)}

3. react中的自定义组件并不能绑定事件

这个报错是在学react-redux时发现的。我记得Vue好像是可以的，我忘了，上一次写Vue是在一年半以前，但好像可以。
比如你有一个自定义的Todo组件，它的内部是p标签，那么你的onClick事件要做的具体的事情，是不能在Todo组件触发的，你得再向下写一层，用props传递到p标签上，由它来触发。

<Todo
	onClick = {() => { onTodoClick(todo.id) }}
/>

这样是不会触发的，必须由真实的dom标签触发，因此要追加如下内容：
const Todo = ({onClick}) => {
    return (
        <li onClick={onClick}>
            <p style={{fontSize: '32px'}}>{text}</p>
        </li>
    )
}