文章目录
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>
)
}