如何解决如何在 express 函数中返回一个对象数组,以便它可以在前端呈现或显示?
//search.js file
import axios from "axios";
export function storeInput(input,callback) {
//input = document.getElementById("a").value;
let result = [];
console.log(input);
if (!callback) return;
axios.post("http://localhost:4000/id",{
searchWord: input,}).then((response) => {
result = response.data;
console.log(result);
});
callback([
{
result
}
]);
}
这是一个进入后端并检索数据的搜索函数,当控制台显示应该返回的数组时,它可以正常工作,如下所示。有人告诉我下面的对象不能直接渲染,所以我试图通过遵循一些在线指南来使对象“可读”,但没有成功。
[{…}]
0:
brand_name: "Lays"
calories: 160
calories_fat: 90
first_ingredient: "other"
processed: "yes"
product: "Classic potato chips"
saturated_fat: 2
serving_size: 28
short_name: "potato chips"
sodium: 170
sugar: 1
trans_fat: 0
_id: "60207f84a8241d2bb803423b"
__proto__: Object
length: 1
__proto__: Array(0)
这是尝试使对象可呈现并将其显示在网页上的前端页面。
//snack-search.components.js file
import React,{ Component } from 'react';
import {storeInput} from "./search.js";
const Snacks = props => (
<tr>
<td>{props.snacks.brand_name}</td>
<td>{props.snacks.product}</td>
<td>{props.snacks.short_name}</td>
<td>{props.snacks.serving_size}</td>
<td>{props.snacks.calories}</td>
<td>{props.snacks.calories_fat}</td>
<td>{props.snacks.saturated_fat}</td>
<td>{props.snacks.trans_fat}</td>
<td>{props.snacks.sodium}</td>
<td>{props.snacks.sugar}</td>
<td>{props.snacks.first_ingredient}</td>
<td>{props.snacks.processed}</td>
</tr>
)
export default class SnackSearch extends Component {
constructor(props) {
super(props);
this.state = { snacks: null };
}
setSnackState(snacks = null) {
this.setState({ snacks });
}
componentDidMount() {
// make async call here not in render
const callback = (snacks) => this.setSnackState(snacks);
storeInput("Lays",callback);
}
SnackList() {
const snacksList = this.state.snacks;
return (
snacksList &&
snacksList.map((currentSnack,i) => (
<Snacks snacks={currentSnack} key={i} />
))
);
}
render() {
return (
<div className = "search">
<table> {this.SnackList()}</table>
</div>
)
}
}
解决方法
好的,对于异步承诺,请在承诺解析中使用回调。请看一下
search.js
/**
*
* @param {String} input
* @param {Function} callback
*/
export function storeInput(input,callback) {
let result = [];
if (!callback) return;
axios.post("http://localhost:4000/id",{
searchWord: input,}).then((response) => {
result = response.data;
// if result is of array type you are expecting
callback(result);
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。