渲染功能不渲染项目答案

【问题标题】：render function is not rendering items渲染功能不渲染项目
【发布时间】：2020-09-17 13:54:57
【问题描述】：

我正在尝试使用这个在 react.js 中渲染一个数组对象：

const myservice = getAllServices(uid).then(service => {
      renderallServices(service);
      return service;
  });

renderallServices(service) 在哪里

const renderallServices = (services) => (
  <>
  {services.map(service => (
          <Row className="justify-content-md-center">
          <ServiceCard service={service}>
          </ServiceCard>
          {console.log(service)}
          </Row>
        ))

    }
  </>

  );

注意：我的 renderallServices 函数在 .then() 内部被调用的原因是因为没有它，它返回一个 promise 而不是我想要的实际数组对象。我知道 renderallServices 被调用是因为 {console.log(service)} 正在返回数组中的每个元素，就像我期望的那样。然而，没有一个 JSX 被渲染。

【问题讨论】：

标签： reactjs rendering jsx

【解决方案1】：

service 包含什么？是jsx 吗？因为您正在调用返回 jsx 的 renderAllServices()，但在您的 .then 中返回 service。

【讨论】：

啊，不错。 service 是一个数组，我删除了 return service 部分并替换为 return renderAllServices(service)。还是不渲染
能否告诉我们您如何使用您的myservice 变量？因为这里没有状态更新的迹象，所以再加上异步调用，我认为你的组件在调用完成之前会被渲染，并且由于你没有触发任何重新渲染，它不会显示任何内容

【解决方案2】：

您如何使用状态变量来维护服务并遍历组件的return 中的状态数组变量

import React, { Fragment, useState } from "react";

const App = ()=>{
 const [services, setServices] = useState([]);
 const myservice = getAllServices(uid).then(service => {
  setServices(service);
  return service;
 });
    return (
    <Fragment>
    {services.length>0&& 
      (<Fragment>
          services.map(service => (
           <Row className="justify-content-md-center">
             <ServiceCard service={service}>
             </ServiceCard>
             console.log(service)
            </Row>
           ))
       </Fragment>) 
    }
  </Fragment> 
    );
 }

希望这会有所帮助:)

【讨论】：