嘿，有谁知道为什么他们没有被识别出来

Question

r t c 和 Addroom component 中的 setRooms 没有被识别，有人知道为什么吗？

谢谢..

App.js

import Addroom from './components/Addroom.js';
import './App.css';

function App() {

  const [rooms, setRooms] = useState([{name: 'Room A',type: '',color:'',},{name: 'Room B',type: '',color:'',},{name: 'Room C',type: '',color:'',}]);
      




const addRoom=(n,t)=>{
  setRooms([...rooms,{name:n,type:t}])
}
  
  return (
    <div className="App">
  
  <h2>My Smart House</h2>

      {rooms.map((e)=>{
    return <Addroom n={e.room} t={e.type} c={e.color} add={addRoom}/>
  })}


    </div>
  );
}

export default App;

Addroom.js


export default function Addroom(props) {

    const [name, setName]= useState('');
    const [type, setType]= useState('');


    return (
        <div>
            <h1>Room: {r.props}</h1>
            <h3>Type: {t.props}</h3>
            <h4>Color: {c.props}</h4>
            <button onClick={()=>setRooms()}></button>



            <input onChange={(e)=>{setName(e.target.value)}} placeholder="name"/><br/>
              <input onChange={(e)=>{setType(e.target.value)}} placeholder="type"/><br/>
              <button onClick={()=>{props.add(name,type)}}>Add</button>
        </div>
    )
}

Answer 1

您应该使用 props.d、props.t 而不是 d.props，因为您拥有 props 对象并使用它的值。

此外，你真的不应该使用这样的快捷方式，这是一种非常糟糕的做法 - 使用完整有意义的名称，你在 AddRoom prop:

中也有错字

// not n={e.room}, there is no usage for props.n
<Addroom r={e.room} t={e.type} c={e.color} add={addRoom} />;

此外，在 Addroom 中你有一个未定义的 setRooms 的使用，这样的功能不在 AddRoom.

的范围内

嘿，有谁知道为什么他们没有被识别出来

Hey, does anyone know why they are not identified

components

reactjs

react-props

react-hooks