javascript - 类型错误 : react__WEBPACK_IMPORTED_MODULE_1___default is not a function or its return value is not iterable

Question

我正在尝试在 react 框架的功能组件中使用 useState 。但我收到了这个错误。原因是什么？
应用程序.js

import useState from 'react';
import Header from './components/Header';
import TodoList from './components/TodoList';
import Form from './components/Form';

function App() {

  const [todos, setTodos] = useState({ id: 1, todo: "Todo1" }, { id: 2, todo: "Todo2" });
  return (
    <div className="row justify-content-center">
      <div className="col-lg-6 col-md-7 col-9">
        <Header />
        <Form onClick={() => setTodos()} />
        <TodoList todos={todos} />

      </div>
    </div>
  );
}

export default App;

TodoList.js:

import ListItem from './TodoListItem';
export default function TodoList(props) {
    return (
        <div>
            {props.todos.map((todo) => <ListItem todo={todo} />)}
        </div>
    )
}

TodoListItem.js

import styles from '../sass/todoListItem.module.scss';
export default function TodoListItem({ todo }) {
    return (
        <div className={`card ${styles.title}`}>
            {todo}
        </div>
    )
}

enter image description here

Answer 1

这是因为 useState不是 react 的默认导出包裹。
要从包中导入特定模块，您应该使用花括号语法。尝试使用 import { useState } from 'react';关于导入语法的更多信息可以是 found here