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>

如果我删除它它的工作，

提前致谢

Answer 1

你不应该把除了 JSX 之外的任何东西放到 JSX 中。问题是 async function 返回 Promise 而不是 JSX。您应该使用React.useEffect 和React.useState 来解决加载问题。让我给你看看。

实际上另一个问题可能是返回一个数组。尝试像我一样将它包装成<>...</>。

import * as React from "react";
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 TableData = () => {
  const [students, setStudents] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  React.useEffect(async () => {
    const response = await api.get("/",options);
    setStudents(response.data.response);
    setLoading(false);
  }, []); 
  if (loading) {
    return <>Loading...</>;
  }
    
  return (
    <>
      {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>
        )
      })}
    </>
  )
}
  
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>

                <TableData />
                 
                </tbody>
              </Table>
             
          
            </Card>
          </div>
        </Row>
       
      </Container>
    </>
  );
};

export default Accounts;

Answer 2

您应该使用生命周期挂钩 useEffect 来获取异步数据（使用功能组件时）。

您还想将数据保存在state。这是在 react 中使用 api 的默认方式。由于 React 的异步行为，简单地将其存储在变量中是行不通的。

你的错误是你试图渲染一个无效的 JSX

你可以像这样使用钩子

const [state, setState] = useState({})
...
useEffect(() =>{
async(() =>{
   const data = await mainFunction()
   setState(data)
})()
}, []) //empty array means to only run once

Answer 3

<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>

试试这个