Javascript 如何在渲染函数中使用已兑现的承诺？

作为实践，我想建立一个租车计划

我正在阅读汽车类别和品牌的列表。但我一直在思考如何使用承诺的结果来列出这些不同的对象。在返回函数中，当我想要访问结果时，我有一个类型错误

car.js

import React, { useEffect, useState } from 'react';

function Car(props) {
const [loading, setLoading] = useState(true)
const [details, setdetails] = useState([])
  useEffect(() => {
    
    async function   getValues() { 
        const car = ['/category', '/brand']
        let response=  car.map( url=>  fetch(url) )
        setLoading(false)
        return Promise.all(response)
        .then(test => test.map(t => t.json())
            )}

setdetails([getValues()])  },  [])

console.log('deetails :>> ', details);
    return (
        <div>
        { loading? <span>test</span> :
        details.map(t=> console.log(t))}
           bonjour
        </div>
    );}

export { Car,};

exports.getCategory = () => {
  return new Promise((resolve, reject) => {
    const query = "SELECT * FROM category"
    db.all(query, (err, rows) => {
      if (err) {
        console.log(`err`, err)
        reject(err);
      }
      else {
        resolve(rows);
      }
    });

  })

};

exports.getBrand = () => {
  return new Promise((resolve, reject) => {
    const query = "SELECT * FROM brand"
    db.all(query, (err, rows) => {
      if (err) {
        console.log(`err`, err)
        reject(err);
      }
      else {
        resolve(rows);
      }
    });

  })
};

const dao = require('./rental_dao')
express =require('express')
let app = express()

const PORT = 3001

app.use(morgan("dev"))
app.use(express.json())

app.get('/category', (req, res) => {
    dao.getCategory(req.query)
        .then(tasks =>  res.json(tasks))
        .catch( err  => res.status(500).json(err));
});

app.get('/brand', (req, res) => {
    dao.getBrand(req.query)
        .then(tasks => { 
        res.json(tasks)})
        .catch( err  => res.status(500).json(err));
});

server.js

import React, { useEffect, useState } from 'react';

function Car(props) {
const [loading, setLoading] = useState(true)
const [details, setdetails] = useState([])
  useEffect(() => {
    
    async function   getValues() { 
        const car = ['/category', '/brand']
        let response=  car.map( url=>  fetch(url) )
        setLoading(false)
        return Promise.all(response)
        .then(test => test.map(t => t.json())
            )}

setdetails([getValues()])  },  [])

console.log('deetails :>> ', details);
    return (
        <div>
        { loading? <span>test</span> :
        details.map(t=> console.log(t))}
           bonjour
        </div>
    );}

export { Car,};

exports.getCategory = () => {
  return new Promise((resolve, reject) => {
    const query = "SELECT * FROM category"
    db.all(query, (err, rows) => {
      if (err) {
        console.log(`err`, err)
        reject(err);
      }
      else {
        resolve(rows);
      }
    });

  })

};

exports.getBrand = () => {
  return new Promise((resolve, reject) => {
    const query = "SELECT * FROM brand"
    db.all(query, (err, rows) => {
      if (err) {
        console.log(`err`, err)
        reject(err);
      }
      else {
        resolve(rows);
      }
    });

  })
};

const dao = require('./rental_dao')
express =require('express')
let app = express()

const PORT = 3001

app.use(morgan("dev"))
app.use(express.json())

app.get('/category', (req, res) => {
    dao.getCategory(req.query)
        .then(tasks =>  res.json(tasks))
        .catch( err  => res.status(500).json(err));
});

app.get('/brand', (req, res) => {
    dao.getBrand(req.query)
        .then(tasks => { 
        res.json(tasks)})
        .catch( err  => res.status(500).json(err));
});

结果

**console**

cars.js:18详细信息：>>[承诺]

cars.js:21承诺{}```
**服务器**
```
GET/category 304 30.692毫秒--
GET/brand 304 38.332 ms--
```