Блог

Мне нужна помощь для извлечения данных из API с помощью запроса GET. Я застрял только для отображения данных в консоли, но я не знаю, как заставить их отображаться на устройстве. Кто-нибудь может мне помочь, пожалуйста?

Это мой код:

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


componentDidMount() {
     fetch("https://URL/api/schedule?filters[employee_id]=6", {method: "GET"})
    .then((response) => response.json())
    .then((responseJson) => {
       this.setState({...this.state, isLoading:false, data:responseJSON}); //set the state with data 
    })
    .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");

    const data = this.state;

    return (... 

<FlatList 
                data={this.state.data}
                renderItem={({item,index})=>
                         (
                         <Text>{item.id}</Text>
                    )
                 }
                }
                 keyExtractor={(item)=>item.id.toString()}
            />
  

)

И тогда я хотел бы знать, как использовать это что-то вроде «{data.id }» (если я не ошибаюсь)

Вот небольшая часть моего .json :

 "data": [
        {
            "id": 114,
            "employee_id": 6,
            "room_id": 17,
            "type_of_cleaning": "D",
            "date": "2020-10-05"
        }, ...
  

Я думаю, что что-то вроде:

  constructor(props) {
        super(props);
        this.state = {
         currentDate: new Date(),
         markedDate: moment(new Date()).format("YYYY-MM-DD"),
         isLoading: true,
         data: [] //should be an array
        };
    }


    componentDidMount() {
         fetch("https://URL/api/schedule?filters[employee_id]=6", {method: "GET"})
        .then((response) => response.json())
        .then((responseJson) => {
           this.setState({...this.state, isLoading:false, data:responseJSON}); //set the state with data 
        })
        .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");

        const data = this.state.data; //amd you are good from here
   }
  

Вам просто нужно setState, и все должно быть в порядке. Чтобы облегчить вам жизнь, я был бы недоволен, если бы не упомянул, что MOBX и Redux могут облегчить вашу жизнь

Вы должны сохранить данные, входящие в состояние, а затем выполнить цикл по ним, даже используя map () или компонент Flatlist

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

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


Ui

<FlatList 
    data={this.state.data}
    renderItem={({item,index})=>
             (
             <Text>{item.id}</Text>
        )
     }
     keyExtractor={(item)=>item.id.toString()}
/>