Question

我正在尝试使用以下方法在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>
        ))

    }
  </>

  );

注意：之所以在.then（）内部调用我的renderallServices函数，是因为没有它，它会返回一个promise而不是我想要的实际数组对象。我知道renderallServices被调用是因为{console.log（service）}正在返回数组中的每个元素，就像我期望的那样。但是，没有呈现任何JSX。

Answer 1

您如何使用状态变量来维护服务并遍历组件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> 
    );
 }

希望这会有所帮助：）

Answer 2

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

渲染功能未渲染项目

2 个答案: