Full Stack Open 2021电话簿项目Invalid Hook Call报错求助

问题排查与解决方案 #

你给出的代码首先存在props属性名不匹配的错误，这是触发问题的直接原因：

1. 你在App组件中给Filter组件传递的两个属性名是value和onChange：

<Filter value={filter} onChange={handleFilterChange}/>

2. 但在Filter组件内部读取props时，用的是完全不对应的props.filter和props.handleFilterChange，两个属性名完全对不上，导致逻辑出错。

修复方法（二选一即可） #

• 方案1：修改Filter组件内的prop读取逻辑，和传递的属性名对齐：

// Filter.js 修改后代码
import React from 'react';

const Filter = (props) => {
    return (
        <div>
            filter shown with:<input value={props.value} onChange={props.onChange} />
        </div>
    )
}

export default Filter

• 方案2：修改App组件中传递给Filter的属性名，和Filter内部的读取逻辑对齐：

// App.js中Filter调用修改后
<Filter filter={filter} handleFilterChange={handleFilterChange}/>

如果修改后仍然出现hook非法调用的报错，可以再排查以下常见原因：

• 执行npm ls react命令检查项目是否安装了多个版本的React，如果出现多个版本，统一版本即可解决
• 检查所有自定义组件的命名是否为大写字母开头，小写开头的组件会被React识别为原生标签，可能触发hook调用规则报错

内容的提问来源于stack exchange，提问作者Paolo Tormon