我已经创建了后端，并且它运行正常。我测试了不同的 Axios 请求以创建表单。 在我的 React 前端项目中，我创建了一个 POST axios 请求，我 console.log(response.data) 并获得了一个带有 id、标题和问题的对象。

我卡住了，因为我不知道如何在我的前端显示对象的数据。

这是我的前端 React 代码：

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import axios from "axios";

const NewForm = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      if (data.length === 0) {
        const response = await axios.post(
          "https://back-formnest-lereacteur.herokuapp.com/form/create",
          {
            title: "Your event",
          }
        );
        console.log(response.data);
        setData(response.data);
      }
    };

    fetchData();
  }, [data]);

  return (
I am completely stuck here to display the data of my backend in my front

这是我的后端代码：

const express = require("express");

const router = express.Router();

const Form = require("../models/Form");


router.post("/form/create", async (req, res) => {
  try {

    if (req.fields.title) {
      const newForm = new Form({
        title: req.fields.title,

      });


      await newForm.save();
      return res.json(newForm);
    } else {
      return res.status(400).json({ error: "Missing parameters" });
    }
  } catch (e) {
    return res.status(400).json({ error: e.message });
  }

});

这是我的 console.log(response.data)，我想在我的前端 React 页面中显示：

我编辑了我的代码，但出现错误：

import React, { useState, useEffect } from "react";
/* import { Link } from "react-router-dom"; */
import axios from "axios";

const NewForm = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      if (data.length === 0) {
        const response = await axios.post(
          "https://back.herokuapp.com/form/create",
          {
            title: "Nouveau formulaire",
          }
        );
        console.log(response.data);
        setData(response.data);
      }
    };

    fetchData();
  }, [data]);

  return (
    <>
      <div>My forms</div>

      <div>
        {data && (
          <>
            <p>{data.title}</p>
            {data.questions.map((question, index) => (
              <div> {question} </div>
            ))}
          </>
        )}
      </div>
    </>
  );
};

export default NewForm;

大家好，

我更新了代码，但仍然出现错误代码（TypeError：无法读取未定义的属性“length”）

<>
      <div>My forms</div>

      <div>
        {data && (
          <>
            <p>{data.title}</p>
            {data.questions.length &
              data.questions.map((question, index) => {
                return <p key={index}>{question}</p>;
              })}
          </>
        )}
      </div>
    </>

我再次更新了我的代码，我成功只显示了我的表单，但我无法成功显示问题数组中包含的数据。我的数据中出现了“0”。请帮忙

return (
    <>
      <div>My forms </div>

      <div>
        {data && data.questions && (
          <>
            <div>{data.title} </div>

            {data.questions.length &
              data.questions.map((question, index) => {
                return <p key={index}>{question}</p>;
              })}
          </>
        )}
      </div>


    </>

我再次更新，出现同样的错误：

return (
    <>
      <div>My forms </div>

      <div>
        {data &&
          data.questions &&
          data.questions.length(
            <>
              <div>{data.title} </div>

              {data.questions.map((question, index) => {
                return <p key={index}>{question}</p>;
              })}
            </>
          )}
      </div>