从React (Typescript)功能组件调用AWS API ?

Question

(我对React相当陌生，特别是如何将其链接到后端服务器。对不起，如果这是一个明显的问题)

我有一个功能React组件Game，它保持当前位置的评估。我用AWS创建了一个API来返回一个评估数(现在是(- 10,10)中的随机值)。在我的组件中有这个函数:

const [evaluation, setEvaluation] = React.useState<number>(0.0);
// ...
const getEvalAfterMove = async (board: string[], nextPlayer: string) => {
async function fetchData() {
const response = await fetch('my/api/link');
const data = await response.json();
setEvaluation(data);
}

fetchData();
};

基本上，在Game组分中有一个GameGrid组分，它本身由Square组分组成。getEvalAfterMove被传递下去，直到每个Square(这是简单的div)都有自己的onClick属性集来调用它。然而，当我在浏览器上打开页面时，每当我单击一个正方形(调用getEvalAfterMove)并且没有其他任何事情发生(我无法获得值)时，TypeError: Failed to Fetch都会被记录- API工作，我可以去调用URL，它给了我一个随机值的JSON。

我是否正确地说，getEvalAfterMove从我的React应用程序的其余部分单独执行，因为它是异步的?我如何更新我的evaluationuseState后，每平方点击使用API调用?当应用程序等待响应时，我需要添加一个加载屏幕来显示吗?

Answer 1

我认为您需要添加可接受的获取配置。

const response = await fetch('my/api/link', {
method: "POST",
headers: {
"Content-Type": "application/json"
}
});

记住，你需要找到你的API接受什么方法，GET, POST…另外，内容类型也不能是application/json，这是最常见的。