无法使用 fetch api reactJS/nodeJS 显示我的消息

Question

我想使用提取 API 调用。为了尝试它是否有效，我尝试显示一条消息。

在我的 nodeJs 服务器中我有：

app.get('/api', (req, res) => {
res.send({
    message: 'Hi'
})

})

在我的前端文件夹中，在我的 app.js:

 import React, {useState} from 'react';

  const App = () => {

  const [message, setMsg] = useState('');
  
  const handleClick = async () => {
    console.log('click');

    fetch('/api')
      .then((response) => {
        return response.json();
      })
      .catch((error) => {
        console.error(`${error}`)
      })
      .then(json => console.log(json))
      .catch((error) => {
        console.error(`Couldn't convert the json: ${error}`)
      });
    setMsg(message);
  };
  
  return (
    <div className="App">
        <button onClick={handleClick}>
          Button
        </button>
        <p>{message}</p>
    </div>
  );
}

export default App;

一切正常，当我在浏览器中加载我的应用程序时，我的检查器没有错误，当我点击我的按钮时：我的控制台显示：

click

我的 json 显示：

{message: 'Hi'} >message: "Hi" >[[Prototype]]: Object

但我的消息不适用于 {message}

当我将 'test' 放入 setMsg(console.log('test')) 时，它起作用了。当我把它放在 test 时它起作用了

我真的不明白我的{message}不显示..

感谢您的帮助

Answer 1

这应该适合你：

const handleClick = async () => {
    console.log('click');
    fetch('/api')
      .then((response) => {
        return response.json();
      })
      .catch((error) => {
        console.error(`${error}`)
      })
      .then(json => {
        setMsg(json.message)
      })
      .catch((error) => {
        console.error(`Couldn't convert the json: ${error}`)
      });
};

无法使用 fetch api reactJS/nodeJS 显示我的消息

can't display my message with fetch api reactJS/nodeJS

node.js

reactjs

fetch

fetch-api

display