Axios 从另一个表调用映射数据 - ReactJs

Question

I am building a React web application that has CRUD operations on a table connected to a database. I am using axios libraries to get/post requests to and from my api controller, and then mapping the data to my sales array. The Sales array contains list of records from the Sales table which has a many-to-one relationship to with my Customer, Products and Store tables. The fetch results only shows the id numbers of customer, products and stores but I want it to get the customer, product and store objects and store them in its own array. The axios calls is only getting back null objects.

How would i go about solving this? Would i need to make 4 API calls: first one to get a list of referenced IDs from the sales table and pass each ID to the the Customers, Products and Stores component to fetch the data? Would this require uplifting the array states to the Sales component?

0:
customer: null
customerId: 1
dateSold: "2020-10-29T00:00:00"
id: 2
product: null
productId: 1
store: null
storeId: 1
__proto__: Object
1:
customer: null
customerId: 2
dateSold: "2020-10-27T00:00:00"
id: 3
product: null
productId: 3
store: null
storeId: 1

export class Sales extends Component {
  constructor(props) {
    super(props);
    this.state = { sales: [], };
    this.populateSalesData = this.populateSalesData.bind(this);
  }

  componentDidMount() {
    this.populateSalesData();
  }

  populateSalesData = () => {
    axios.get("Sales/GetSales")
      .then((result) => {
        this.setState({ sales: result.data })
        console.log(result.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }

Answer 1

this is not the client-side request job to handle your schema relations.

to access customer and product of a sale you should change your api .

when you request to Sales/GetSales GetSales should loop through every sale in your

database and for each sale find the relative customer by customerId inside sale object and

set it to result.

below we can see a simple example wrote in nodejs and mongoose.

// inside api

const sales = await Sale.find({});
sales.map((sale) => {
  sale.customer = await Customer.find({id: sale.customerId})
});

return sales.