Question

大家好，浏览器显示错误，无法编译

编译失败 ./src/App.js 找不到模块：无法解析'./components/Addroom.js'

有人可以说出什么问题吗？我没有做太多改变，特别是在导入方面，我无法弄清楚这个问题，因为它在浏览器中而不是在响应中标识并显示（错误不会出现在终端中。）

如果您需要将我的代码上传到工作框架并进行测试，那就太好了，不管用什么来做

感谢帮手！

App.js

import React, { useState } from "react";
import './App.css';
import Addroom from './components/Addroom.js'
import HomePage from './components/HomePage.js'

export default function App() {
  const [flag, setFlag] = useState(false);
  const [listOfRooms,setListOfRooms]= useState([]);

  const addNewRoom=(rn,rc)=>{
    setListOfRooms([...listOfRooms,{roomName:rn,roomColor:rc}])
  }

  return (
    <div className="App">
      <h1>My Smart House</h1>

      <button className="button1" onClick={() => setFlag(!flag)}>
        Change Flag
      </button>

      {flag ? <Addroom a={flag} /> : <HomePage h={flag} />}


      {listOfRooms.map((e)=>{
      return <HomePage t={e.roomName} i={e.roomColor}/>
    })}

    <Addroom add={addNewRoom}/>



    </div>
  );
}

Addroom.js

import React from 'react';

export default function Addroom(props) {

    const [roomName, setRoomName]= useState('');
    const [roomColor, setRoomColor]= useState('');
  

    
 
    return (
        <div>

<h2> Addroom {props.a}</h2>
<h3>  {props.rn}</h3>
<h3>  {props.rc}</h3>

            <input onChange={(e)=>{setRoomName(e.target.value)}} placeholder="Room Name"/><br/>
            <input onChange={(e)=>{setRoomColor(e.target.value)}} placeholder="Room Color"/><br/>
            <button onClick={()=>{props.add(roomName,roomColor)}}>Add</button>

        </div>
    )
}

主页

import React from 'react'

export default function HomePage(props) {
    return (
        <div>
           <h2> HomePage {props.h}</h2>
        </div>
    )
}

浏览器显示错误且无法编译，找不到模块：无法解析“ ./components/Addroom.js”

大家好，浏览器显示错误，无法编译

0 个答案: