0
votes

Comment mapper un tableau d'objets dans React js

J'essaye de mapper le tableau que j'obtiens de l'appel d'API à l'état. En fait, il mappe les éléments du tableau dans le compte correct. Cependant, je n'obtiens qu'un seul élément du tableau n fois (n longueur du tableau). Où je me suis trompé ???

res: [{"subject":"SoftwareEngineering II","date":"2020-11-16","hour":"15:26","modality":"In person","room":"12A","capacity":150,"bookedStudents":100,"teacherName":"Franco yjtyjty","lectureId":1,"booked":false},{"subject":"SoftwareEngineering II","date":"2020-11-14","hour":"17:26","modality":"In person","room":"12A","capacity":50,"bookedStudents":100,"teacherName":"Franco yjtyjty","lectureId":2,"booked":false},{"subject":"SoftwareEngineering II","date":"2020-11-13","hour":"17:26","modality":"In person","room":"12A","capacity":50,"bookedStudents":100,"teacherName":"Franco yjtyjty","lectureId":3,"booked":false},{"subject":"SoftwareEngineering II","date":"2020-11-17","hour":"17:26","modality":"In person","room":"12A","capacity":50,"bookedStudents":100,"teacherName":"Franco yjtyjty","lectureId":4,"booked":false}]

json de l'appel d'API

export default class NewCalendarView extends Component {
  componentDidMount() {
    API.getLectures().then((res)=>{
      console.log(res)
       let cal=res.map((lec)=>{
        let lecture={
        title: lec.subjectName,
        startDate : moment(lec.dateHour).toDate(),
        endDate:  moment(lec.dateHour).toDate()
        }  
        console.log("lec "+ JSON.stringify(lecture));
        return lecture;
             })
          this.setState({events:cal,loading:null,serverErr:null})
    }).catch((err)=>{
        this.setState({serverErr:true,loading:null})
    })
}
  constructor(props) {
    super(props);

    this.state = {
       events: []
    }
  }
  render() {
    return (
      <div style={{
        flex: 1
      }}>

        <Calendar
          localizer={localizer}
          events={this.state.events}
          startAccessor='startDate'
          endAccessor='endDate'
          views={['month', 'week', 'day']}
          culture='en'
          />
      </div>
    );
  }
}

javascript reactjs mapping

2 commentaires

y a-t-il une chance que vous puissiez partager le journal à partir de console.log (res)

oui, j'ai ajouté au message

3 Réponses :

1
votes

Il semble que les keys auxquelles vous essayez d'accéder n'existent pas dans l'objet res. Essayez de remplacer les clés comme défini ci-dessous et cela pourrait vous aider.

Il peut parfois être déroutant de faire correspondre les paramètres dans le cloud et dans l'application, en particulier avec les conventions camelcase et kebabcase !

let lecture= {
    title: lec.subject,
    startDate : moment(lec.date).toDate(),
    endDate:  moment(lec.date).toDate()
    }

1 commentaires

oui j'ai confondu les noms des paramètres. Merci beaucoup.

1
votes

Je suggérerais de supprimer ce morceau de code -

this.setState({events:JSON.stringy(res),loading:null,serverErr:null})

faites simplement ceci à la place -

 let cal=res.map((lec)=>{
    let lecture={
    title: lec.subjectName,
    startDate : moment(lec.dateHour).toDate(),
    endDate:  moment(lec.dateHour).toDate()
    }  
    console.log("lec "+ JSON.stringify(lecture));
    return lecture;
         })

aussi j'ai remarqué qu'il n'y a pas de key unique, c'est pourquoi c'est toujours le premier objet répété n fois

de toute façon j'ai remarqué que Talha Azhar a déjà répondu pendant que je tapais ma réponse, sa réponse m'aidera certainement, vous pouvez également essayer de faire ce que je suggère ci-dessus, cela réduira également votre code.

0 commentaires

0
votes

Vous mappez des propriétés qui n'existent pas dans votre réponse. Vous devez stocker le lectureId pour l'utiliser comme clé.

Je vous suggère également d'utiliser une approche plus idiomatique, en utilisant des composants de fonction et des crochets.

Vous pouvez réécrire votre composant comme ceci:

function NewCalendarView() {
  const [serverErr, setServerErr] = useState();
  const [loading, setLoading] = useState();
  const [events, setEvents] = useState();

  useEffect(() => {
    (async () => {
      try {
        const lectures = await API.getLectures();

        const cal = lectures.map(({ lectureId, subject, date }) => ({
          id: lectureId,
          title: subject,
          startDate: moment(date).toDate(),
          endDate: moment(date).toDate()
        }));

        setEvents(cal);
        setServerErr(null);
      } catch (e) {
        setEvents();
        setServerErr(true);
      }
      setLoading(null);
    })();
  }, []);

  return (
    <div
      style={{
        flex: 1
      }}
    >
      <Calendar
        localizer={localizer}
        events={events}
        startAccessor="startDate"
        endAccessor="endDate"
        views={["month", "week", "day"]}
        culture="en"
      />
    </div>
  );
}

J'ai mis une version fonctionnelle dans ce bac à sable: https://codesandbox.io/s/react-playground-forked-7sm6h?file=/index.js:2582-3523

0 commentaires