我在学习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>
    )
}

我在学习React等一系列产物中遇到的那些坑我在学习React等一系列产物中遇到的那些坑 swallowblank 发布了113 篇原创文章 · 获赞 6 · 访问量 7105 私信 关注
上一篇:React Hook 概述


下一篇:【React】从class componet到hooks component,一个只有局部最优解的时代