React 的 useMemo 方法导致钩子调用无效

Question

该场景非常简单，ups 无需阅读以下说明即可直接编写代码。

我正在创建一个非常简单的反应应用程序，它呈现一个包含单个 h3 元素的列表（每个都有一个唯一的 id）。单击 h3 元素时，其文本将从“未单击”更改为“已单击”。这是通过根组件 App 中的 useState 实现的。状态跟踪被点击的组件的 id。当一个 h3 元素被点击时，它会触发一个回调，将被点击的 id 设置为它自己的 id。问题是所有自定义列表组件都会在触发点击时重新渲染。我正在尝试在 上使用 React 的 useMemo 来防止重新渲染，但出现此错误：

无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一而发生的： 1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM） 2. 你可能违反了 Hooks 规则 3. 你可能有多个 React 副本同一个应用

// App.js
import React from 'react';
import ListElement from './ListElement'
const listOfID = [1,2,3,4,5,6]

function App() {

  const [clicked, updateClicked] = React.useState(null)
  return (
    <ul>
      {listOfID.map((id, index )=> < ListElement key={index} id={id} clicked={id == clicked} updateClicked={updateClicked}/>)}
    </ul>
  )
}

// ListElement.js
import React from 'react';

export default React.useMemo((props) => {
    console.log("rendered")
    return (
        <li>
            <h3 onClick={() => props.updateClicked(props.id)}>{(props.id == props.clicked) ? "clicked" : "not clicked"}</h3>
        </li>
    )
},
    (prevProps, nextProps) => {
        return prevProps.clicked == nextProps.clicked
    }
);

Answer 1

useMemo是一个hook。我相信你是React.memo为了防止无用renders的Components.

export default React.memo((props) => {
    console.log("rendered")
    return (
        <li>
            <h3 onClick={() => props.updateClicked(props.id)}>{(props.id == props.clicked) ? "clicked" : "not clicked"}</h3>
        </li>
    )
},
    (prevProps, nextProps) => {
        return prevProps.clicked == nextProps.clicked
    }
);