Question

Warning message in assign(mod_tmp@model_name, mod_tmp, envir = parent.frame(n = 1)):
“only the first element is used as variable name”

Error in get(model): object 'success_AllData_57.892408_GLM' not found

const listApplications = [
    {
        id: 1, // SandboxId
        asset: {
            "id": 1,
            name: "desc", // Asset Name
            desc: "desc",
            currentVersion: {
                id: 1
            }
        },
        screenshot: {
            id: 1,
            currentVersion: {
                id: 1
            }
        }
    }
];


export default class Sandbox extends React.Component<RouteComponentProps<{}>, {}> {
    public render() {
        return <pre>{JSON.stringify(listApplications, null, 2)}</pre>;
    }
}

我想要一个组件，该组件可以通过api返回以JSON格式编码的硬编码数组，

我该怎么做？

这是我到目前为止所拥有的。

沙箱组件应该返回给我一个JSON硬编码数组我可以通过获取来访问

Answer 1

不要将React用于API！ API应直接从服务器提供。只需几行代码即可实现。 express中的示例：

const express = require('express');

const app = express();
const listApplications = [/* your data here*/];
const port = 57833;

app.get('/api/sandbox', (req, res) => {
  res.json(listApplications);
});
app.listen(port, () => console.log(`Server listening on port ${port}`);

您的fetch('http://localhost:57833/api/sandbox')将永远无法工作，因为这是React应用程序的服务方式：

已投放.html文件
您的浏览器解析文件
此.html文件引用一个或多个.js，并可能引用了某些.css，.ico和其他文件
获取并提供所有文件，然后运行React的JavaScript代码来呈现React应用
最后，将渲染应用，其中可能在HTML内包含一些JSON

这是最重要的一点-作为用户，您可能只会看到JSON输出，但是通过获取文件，返回的是非常复杂的HTML + JS对象，其中提取了一些JSON >只有在浏览器工作繁忙之后。

TL; DR不要将React用于API。

我如何在React中创建一个api

1 个答案: