Блог

Главная - Вопросы по программированию - Передача массива и отображаемых данных из API в календарь событий

Передача массива и отображаемых данных из API в календарь событий

#react-native #api #axios #react-hooks #react-native-android

#API #axios #реагирующие крючки #react-native

Вопрос:

Я использую https://github.com/joshjhargreaves/react-native-event-calendar чтобы создать простой календарь dayview в react native и получать данные из API. я использую axios для получения данных

  const[title,setTitle]=useState('')
    const[start,setStart]=useState('')
    const[end,setEnd]=useState('')
    const[summary,setSummary]=useState('')

  const data={
    title,
    start,
    end,
    summary
  }
  
  const[timetable,setTimetable]=useState([]);

  useEffect(() => {
      getData()
  },[])

  const getData=()=>{
      Axios.get('http://sh3ll.my.id/events/timetable.json')
      .then(res=>{
          console.log('res getData:', res.data)
          setTimetable(res.data)
      })
  }

как передать массив в свойство events, я не могу отображать данные из api

       <EventCalendar
          events={??}
          width={width}
          size={60}
          initDate={'2020-11-17'}
          scrollToFirst
        />

Комментарии:

1. Я думаю, вы должны попытаться использовать свое расписание состояния в событиях реквизита. Согласно документации, этот реквизит принимает массив событий. Это то, что вы извлекаете из schedule.json, верно?

2. Кроме того, если передача расписания состояния не работает с первой попытки, добавьте props renderEvent , которые определяют, как компонент должен отображать данные.

3. @ebillis я пробовал, это не сработало, да, я получаю данные из timetime.json

Ответ №1:

Попробуйте это

 const[events,setEvents]=useState([]); // default empty

const getData=()=>{
      Axios.get('http://sh3ll.my.id/events/timetable.json')
      .then(res=>{
          console.log('res getData:', res.data)
          setEvents(res.data.timetable) // set here
      })
  }



<EventCalendar
          events={events} // use here
          width={width}
          size={60}
          initDate={'2020-11-17'}
          scrollToFirst
        />