我知道我会觉得自己很愚蠢,但这就是我的 idea .我已经学习了几个星期的Reaction(来自所有原生的Java客户端),并且我一直在使用useEffect获取数据.但我看到越来越多的言论要求避免这种情况,转而使用SWR.但该组件不显示接收到的数据.我知道这将是一件简单的事情,但经过数小时的搜索,我放弃了,并提出了一个问题:是什么阻止该组件在接收数据时进行更新?

const MissieDetail = () => {

const { data: missions, isLoading, error } =
    useSWR('GetMissions', GetMissions, {
        onSuccess(data, key, config) {
            console.log(data)
        }
    })
let content
if (isLoading) { content = <p>Loading...</p> }
if (error) { content = <p>{error.message}</p> }
content =
    <ul>
        {
            missions.map((mission) => {
                <li key={mission.id}>{mission.titel}</li>
            })
        }
    </ul>
return (
    <main>
        <h2>Mission List</h2>
        {content}
    </main>
)}

I am receiving data. At that moment the "loading" message disappears but no li are added to the ul enter image description here

推荐答案

.map迭代器函数没有返回任何内容--它有花括号,这意味着它是一个函数体.删除花括号使其成为隐式返回的单行函数,或添加return语句:

// classic `return` statement
content =
  <ul>
    {
      missions.map((mission) => {
        return <li key={mission.id}>{mission.titel}</li>;
      })
    }
  </ul>

// OR single-line arrow function, implicit return
content =
  <ul>
    {
      missions.map((mission) =>
        <li key={mission.id}>{mission.titel}</li>
      )
    }
  </ul>

Javascript相关问答推荐

foreach循环中的Typescript字符串索引

如何解决这个未能在响应上执行json:body stream已读问题?

如何才能拥有在jQuery终端中执行命令的链接?

. NET中Unix时间转换为日期时间的奇怪行为

按下同意按钮与 puppeteer 师

Next.js(react)使用moment或不使用日期和时间格式

如何在Javascript中使用Go和检索本地托管Apache Arrow Flight服务器?

Regex结果包含额外的match/group,只带一个返回

WhatsApp Cloud API上载问题:由于MIME类型不正确而导致接收&Quot;INVALID_REQUEST";错误

对路由DOM嵌套路由作出react

获取';无法解决导入和导入";slick-carousel/slick/slick-theme.css";';错误

如何通过Axios在GraphQL查询中发送数组

无法使用npm install安装react-dom、react和next

如何压缩图像并将其编码为文本?

递增/递减按钮React.js/Redux

JQuery使用选项填充HTMLSELECT并设置默认结果,默认结果显示为空

JavaScript -如何跳过某个字符(S)来打乱字符串中的字符

MUI-TABLE:MUI表组件中交替行的不同 colored颜色 不起作用

如何在单击Search按钮时更新Reaction组件?

鼠标进入,每秒将图像大小减小5%