Question

你能解释一下为什么这段代码是错误的

import React, { useState } from 'react';

import UsrInput from '../component/UsrInput'
import TodoItemList from '../component/TodoItemList'

const todos = () => {

  const DUMMY_TODO_ITEM = [
    {
      id: 'ti1',
      description: 'do programming'
    },
    {
      id: 'ti2',
      description: 'do dishes'
    },
    {
      id: 'ti3',
      description: 'cleaning the house'
    },
  ]

  const [todoItem, setTodoItem] = useState(DUMMY_TODO_ITEM);

  return (
    <React.Fragment>
      <UsrInput />
      <TodoItemList item={DUMMY_TODO_ITEM} />
    </React.Fragment>
  );
}

export default todos;

我收到此错误 >>

“编译失败。

src\main\pages\Todos.js 第 23:35 行：在既不是 React 的函数“todos”中调用 React Hook “useState” 函数组件也不是自定义的 React Hook 函数。 React 组件名称必须以一个大写字母 react-hooks/rules-of-hooks

搜索关键字以了解有关每个错误的更多信息。”

Answer 1

React 组件命名约定说第一个字母应该是大写的。 React Hooks 只能在 React Components 中使用。所以你必须重命名你的 const todos -> const Todos 用于 react 将其视为组件。

Answer 2

尝试将“todos”大写，例如 Todos

在 React 中，组件需要大写，自定义钩子需要以 use 开头。

useState 错误，我找不到解决方案

2 个答案: