J'essaie de récupérer des données de ma base de données avec des tâches simples. Cependant, je n'arrive pas à les cartographier dans une liste sur mon site.

Je continue à recevoir des erreurs comme : todoFromServer.map n'est pas une fonction ou que todoFromServer n'est pas un tableau, etc.

Mon code actuel ressemble à ceci:

import apiFacade from "../api/apiFacade";
import React, { useState, useEffect } from "react";
import {Form, FormGroup, Label, Input, Button} from "reactstrap"

export default function SecurePage() {

  const [todoFromServer, setTodoFromServer] = useState("Waiting...");

  useEffect(() => {
    apiFacade.getTodo().then((data) => setTodoFromServer(data));
  }, []);

  return (
    <div className="container-fluid padding">
      <div className="row">
        <div className="col-3"></div>
        <div className="col-6 text-center">
          <Form>
            <FormGroup>
              <h3 className="mt-5">Todos</h3>
              <Input type="text" placeholder="Enter Todo"></Input>
            </FormGroup>
            <Button type="submit">Add</Button>
          </Form>
          <div>
            {todoFromServer.map(() => (
              <div>{todoFromServer.todoText}</div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Les données que j'essaie de récupérer devraient sortir sous forme de json ressemblant à ceci :

Fetched data

Je suis un peu perdu. J'espère que quelqu'un pourra m'aider à être clair - je veux que les données soient mappées sur une liste avec un bouton de suppression à côté...

0
Thor Christensen 15 nov. 2020 à 20:51

1 réponse

Meilleure réponse
  const [todoFromServer, setTodoFromServer] = useState([]); // <=== initialize this as an empty array.

  useEffect(() => {
    apiFacade.getTodo().then((data) => setTodoFromServer(data)); // Make sure data returned from Promise resolve is indeed an array
  }, []);

Vous voulez lire todoText de chaque tâche à l'intérieur de votre élément de tableau afin que vous fassiez quelque chose comme ceci.

{todoFromServer.length ? todoFromServer.map((todo) => (
    <div>{todo.todoText}</div>
)) : "Waiting..."}

Pour une référence supplémentaire, jetez un œil à l'utilisation d'Array.map ici : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

0
Rikin 15 nov. 2020 à 18:01