如何从 React-Native 的 API 中获取对象数据中的对象

Question

I need to get the data from the object room:{...}, but I'm stuck into just log the whole data from the API in the console. I need some help..............................................................

That's my code for now:

class HomeScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
         currentDate: new Date(),
         markedDate: moment(new Date()).format("YYYY-MM-DD"),
         isLoading: true,
         room: []
        };
    }


    componentDidMount() {
         fetch("https://URL/api/schedule?resolve[]=room", {method: "GET"})
        .then((response) => response.json())
        .then((responseJson) => {
           this.setState({room: responseJson});
           console.log(responseJson);
        })
        .catch((error) => {
            console.error(error);
        });
    }

    render() {
        const today = this.state.currentDate;
        const month = moment(today).format("MMMM");
        const date = moment(today).format("D")
        const day = moment(today).format("dddd");

       

        return (...) 

Here is the JSON:

{
    "id": 190,
    "employee_id": 6,
    "room_id": 28,
    "type_of_cleaning": "D",
    "date": "2020-10-05",
    "room": {
        "data": {
            "id": 28,
            "customer_id": 5,
            "room_type_id": 19,
            "room_inventory_template_id": 8,
            "name": "154",
            "floor": 3
        }
    },
    "room-room_type": {
        "data": {
            "id": 19,
            "customer_id": 5,
            "name": "room_types_4451C9D4CD"
        }
    }
}

I need to display the room 'name' and 'floor'.

Answer 1

set initialstate of room to null

 this.state = { currentDate: new Date(), markedDate: moment(new Date()).format("YYYY-MM-DD"), isLoading: true, room: null }; 

 let roomName = '' let roomFloor = ' if (this.state.room) { roomName = this.state.room.data.name roomFloor = this.state.room.data.floor }

Answer 2

Your room state object contain the same data as your JSON.

You could access the by using name : this.state.room.room.data.name floor: this.state.room.room.data.floor

then you can display it as <Text>{this.state.room.room.data.name}</Text> and <Text>{this.state.room.room.data.floor}</Text>

make sure u have the same structure of data in your state room object when accessing the data or it will cause error