reactjs - React 错误：对象作为 React 子级无效（找到：[object Promise]）。如果您打算渲染一组孩子，请改用数组

Question

我是新来的反应，我正在尝试使用异步函数，但我遇到了以下错误“错误：对象作为 React 子级无效（找到：[object Promise]）。如果您打算渲染一组子级，改用数组。 ”

import {
  Badge,
  Card,
  CardHeader,
  CardFooter,
  DropdownMenu,
  DropdownItem,
  UncontrolledDropdown,
  DropdownToggle,
  Media,
  Pagination,
  PaginationItem,
  PaginationLink,
  Table,
  Container,
  Row,
  UncontrolledTooltip,
} from "reactstrap";
// core components

import Header from "components/Headers/Header.js";
  import 'react-toastify/dist/ReactToastify.css';
import { Link } from "react-router-dom";

import axios from "axios";
import data from "./data";
var apitoken= localStorage.getItem('apitoken');

const api=axios.create({baseURL:"https://IP/DeAPI/api/v1/account"})
const options = {
  headers: {'Authorization': apitoken}
}

const asynchronousFunction = async () => {
  const response = await api.get("/",options)
 
  window.input=response.data.response


}

const mainFunction = async () => {
  const result = await asynchronousFunction()
  return result
}
const state = { students:window.input}
//console.log(window.input);
  const renderTableData=async ()=> {
    console.log("test"+await mainFunction())
    if(state.students) {
    
    
      return state.students.map((student, index) => {
         const { id, name, age, email } = student //destructuring
         return (
            <tr key={id}>
               <th scope="row">
                      <Media className="align-items-center">
                        <a
                          className="avatar rounded-circle mr-3"
                          href="#pablo"
                          onClick={(e) => e.preventDefault()}
                        >
                          <img
                            alt="..."
                            src={
                              require("../../assets/img/theme/bootstrap.jpg")
                                .default
                            }
                          />
                        </a>
                        <Media>
                          <span className="mb-0 text-sm">{id}   </span>
                        </Media>
                      </Media>
                    </th>
                    <td>
                      <Badge color="" className="badge-dot mr-4">{name}</Badge>
                    </td>
               <td>
                      <Badge color="" className="badge-dot mr-4">{age}</Badge>
                    </td>
                    <td>
                      <Badge color="" className="badge-dot mr-4">{email}</Badge>
                    </td>
                    
            </tr>
         )
      })
    }
    else
    {
      console.log("Something went wrong")
    }
   }
  
const Accounts = () => {

 
  return (
    <>

      <Header />
      {/* Page content */}
      <Container className="mt--7" fluid>
        {/* Table */}
        <Row>
          <div className="col">
            <Card className="shadow">
              <CardHeader className="border-0">
                <h3 className="mb-0">All Account</h3>
              </CardHeader>
              <div>
          
          
         </div>
              <Table className="align-items-center table-flush" responsive>
                <thead className="thead-light">
                  <tr>
                    <th scope="col">Account Name</th>
                    <th scope="col">Phone</th>
                    <th scope="col">Email</th>
                    <th scope="col">Account Owner</th>
                    {/* <th scope="col">Pincode</th> */}
                    <th scope="col" />
                  </tr>
                </thead>
                <tbody>
                {renderTableData()}
                 
                </tbody>
              </Table>
             
          
            </Card>
          </div>
        </Row>
       
      </Container>
    </>
  );
};

export default Accounts;

我在这里做错了什么；

我正在尝试从 api 获取学生数据并将其动态呈现在组件中。

问题在于

<tbody>
                {renderTableData()}
                 
                </tbody>

如果我删除它的工作，

提前致谢

标签： reactjs

Answer 1

<tbody>
{state.students?.map((student, index) => {
         const { id, name, age, email } = student //destructuring
         return (
            <tr key={id}>
               <th scope="row">
                      <Media className="align-items-center">
                        <a
                          className="avatar rounded-circle mr-3"
                          href="#pablo"
                          onClick={(e) => e.preventDefault()}
                        >
                          <img
                            alt="..."
                            src={
                              require("../../assets/img/theme/bootstrap.jpg")
                                .default
                            }
                          />
                        </a>
                        <Media>
                          <span className="mb-0 text-sm">{id}   </span>
                        </Media>
                      </Media>
                    </th>
                    <td>
                      <Badge color="" className="badge-dot mr-4">{name}</Badge>
                    </td>
               <td>
                      <Badge color="" className="badge-dot mr-4">{age}</Badge>
                    </td>
                    <td>
                      <Badge color="" className="badge-dot mr-4">{email}</Badge>
                    </td>
                    
            </tr>
         )
      }) 
} 
</tbody>

试试这个