嘿，有谁知道他们为什么不被识别

Question

rtc和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 道具中也有一个错字：

// 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 的范围内。