如何正确地将数组从父 React 类组件状态传递给使用钩子编写的子组件？

Question

I'm trying to learn how to use react hooks properly. I have a parent component written with class and I'm trying to capture an array (rooms) in my new child component that is using hooks. Here is a simplified version of the code:

Parent component

export default class ParentComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      rooms: []
    };
  }

  componentDidMount() {
    RoomService.getAllRooms()
        .then((res) => {
          if (res.status === 200) {
            var roomsArray = [...res.data];
            this.setState({ rooms : roomsArray });
          }
        })
        .catch((err) => console.log(err))
  }

render() {
return (
  <div>
  <ChildComponent {...this.state.rooms}/>
  </div>
);

}

An this is my child component

function ChildComponent (props) {
  const [rooms, setRooms] = useState(props); 

  useEffect(() => {
    console.log('props received ' + JSON.stringify({rooms}));
  },[props]);

...

If I log my state inside the parent component I see the content of my array. But my child component is always displaying an array with no content.

props received {"rooms":{}}

What am I doing wrong that I can't retrieve the content of my array inside the child component?

Answer 1

You should pass props by providing the prop name in parent component:

 <ChildComponent rooms={this.state.rooms}/>

and in ChildComponent :

function ChildComponent ({rooms}) {
  const [rooms, setRooms] = useState(rooms); 

  useEffect(() => {
    console.log('props received ' + JSON.stringify(rooms));
  },[rooms]);