反应映射获取数据答案

【问题标题】：React mapping fetched data反应映射获取数据
【发布时间】：2021-02-27 01:12:16
【问题描述】：

我正在尝试通过一些简单的待办事项从我的数据库中获取一些数据。但是我似乎无法将它们映射到我网站上的列表中。

我不断收到错误消息，例如：todoFromServer.map 不是函数或 todoFromServer 不是数组等。

我当前的代码如下所示：

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>
  );
}

我试图获取的数据应该是 json 格式，如下所示：

我有点迷路了..希望有人可以帮助我说清楚 - 我希望将数据映射到列表中，旁边有一个删除按钮...

【问题讨论】：

您收到此错误是因为 todoFromServer 的第一个值是“Waiting...”
todoFromServer 设置为"Waiting..."，然后您尝试在该字符串上调用.map。

标签： json reactjs

【解决方案1】：

  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
  }, []);

您想读取数组项中每个待办事项的todoText，以便执行类似的操作。

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

如需更多参考，请查看此处的 Array.map 用法：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

【讨论】：