从后端获取后无法动态呈现自定义的响应组件
从后端获取后无法动态呈现自定义的响应组件
提问于 2022-01-03 04:58:48
我正在尝试从后端获取数据，然后将带有道具的自定义组件呈现为从后端获取的数据。这里有一个片段：
import { useEffect } from 'react';
import axios from 'axios';
import Card from './Card';
export default function DesignList() {
useEffect(() => {
async function populate() {
const response = await axios({
method: 'POST',
baseURL: 'http://localhost:3001',
url: '/recommend',
headers: { 'Content-Type': 'application/json' },
});
response.data.forEach(recommendation => {
document.getElementById('design-list').append(<Card
title={recommendation.title}
});
}
populate();
})
return (
<div id='design-list' />
)
}我还尝试使用React.createElement()，将它推到数组中并尝试呈现它，但是我得到了如下所述的输出。
这提供了屏幕上的输出，而不是HTML组件。每个组件的输出是[object Object]。
如何在从后端获取道具数据之后动态地呈现组件？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-01-03 05:02:56
使用state来显示建议，而不是添加dom。
import { useEffect, useState } from "react";
import axios from "axios";
import Card from "./Card";
export default function DesignList() {
const [recommendations, setRecommendations] = useState([]);
useEffect(() => {
async function populate() {
const response = await axios({
method: "POST",
baseURL: "http://localhost:3001",
url: "/recommend",
headers: { "Content-Type": "application/json" },
});
setRecommendations(response.data);
}
populate();
});
return (
<div id="design-list">
{recommendations.map((item) => (
<Card title={item.title} />
))}
</div>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70561837
复制相关文章
相似问题
腾讯云开发者
