首先,确认Netlify上的部署是否成功,并检查后端API是否正常工作。然后,在Netlify的环境变量中添加后端API的URL,并在前端代码中使用该URL来获取数据。
具体示例代码如下(假设后端API的URL为https://example-api.com):
在Netlify的“Settings”中,找到“Build & Deploy”选项卡,然后在“Environment”下添加一个新的环境变量:“REACT_APP_API_URL”并将值设置为后端API的URL(即https://example-api.com)。
在需要获取数据的组件中,使用“process.env.REACT_APP_API_URL”来代替硬编码的API URL,如下所示:
import React, { useState, useEffect } from "react";
function MyComponent() {
const [data, setData] = useState([]);
useEffect(() => {
async function fetchData() {
const response = await fetch(process.env.REACT_APP_API_URL);
const data = await response.json();
setData(data);
}
fetchData();
}, []);
return (
My Data
{data.map((item) => (
- {item.text}
))}
);
}
export default MyComponent;
这样就可以在部署到Netlify后使用后端API获取数据了。