Question

我创建了一个简单的Checkbox组件，该组件使用useEffect和useState处理该组件的选中状态。

我已将此组件添加到我的组件集合（包含所有组件的自己的项目）中。但是，如果我想在其他项目中使用该组件，则会收到以下错误消息：https://reactjs.org/docs/error-decoder.html/?invariant=321

如果我取消对useState和useEffect方法的注释，则该组件正常工作；如果将整个组件复制到项目中（使用useEffect和useState方法！），该组件也可以正常工作。

我尝试了推荐的解决方案（https://reactjs.org/warnings/invalid-hook-call-warning.html），但并没有解决我的问题。

const Checkbox = (props) => {
  const [isChecked, setIsChecked] = useState(props.checked); // initialize isChecked with the prop checked (true/false)

  useEffect(() => {
    if (props.getCheckedState) {
      props.getCheckedState(isChecked); // to get the status of isChecked in my parent component
    }
  }, [isChecked]);

  return (
    //
    // My component
    //
  );
};

export {Checkbox};

Answer 1

也许是因为您使用的是const而不是function关键字？试试这个：

import matplotlib.pyplot as plt
import numpy as np

plt.style.use('ggplot')

labels = ['A', 'B', 'C', 'D', 'E', 'F']
values = [10, 15, 12, 9, 7, 13]

indexes = np.arange(len(labels))
width = 0.8
plt.bar(indexes, values, width=width, color='green')
plt.title('Bar Chart')
plt.xticks(indexes, labels)
plt.show()

Answer 2

您没有指定要如何将这些钩子实际导入到Checkbox组件中？

如果Checkbox拉出一个版本的React，而其他项目拉出另一个版本的React（例如，使用Checkbox的组件导入了不同的React），则您可能处于You might have more than one copy of React in the same app情况下。

确保Checkbox和其他项目都导入相同版本的React。

使用umd库中的组件时，为什么会出现无效钩子错误？

2 个答案: