React TodoList项目Module not found错误解决方案咨询

错误原因 #

你在TodoList.js中错误指定了useState的导入路径——React的hooks无需从内部的cjs/react.development文件导入，直接从react包导入即可。

修复步骤 #

1. 打开src/Components/TodoList.js文件
2. 将错误的导入语句替换为标准写法

修正后的TodoList.js代码 #

import React, { useState } from 'react';
import TodoForm from './TodoForm'

export default function TodoList(){
   const [todos, setTodos] = useState([]);
  const addTask = task => {
    if (!task.text) {
      return
    }
     const newTodos = [task, ...todos];
    setTodos(newTodos);
}
  return <div>
     <TodoForm addTask={addTask} ></TodoForm>
   </div>;
}

补充说明 #

React项目中，所有核心API（包括useState这类hooks）都统一从react包导入，项目脚手架会自动处理模块的内部路径映射，无需手动指定具体文件位置，保持和TodoForm.js一致的导入写法即可避免这类错误。

内容的提问来源于stack exchange，提问作者Saswat Seth.