Html 如何在web中使用React Js组件中的api？

我是React.js web开发的新手，我坚持在组件内部使用API。我共享了以下代码：

export default function Sidebar() {
    const [show, setShow] = useState(false);
    constructor(props) {
        super(props);
        this.state = {
            items = []
        };
    }

    componentDidMount() {
        const requestOptions = {
            method = "POST",
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ title: 'React POST Request Example' })
        };
        fetch("https://website/api/home",requestOptions)
          .then(response => response.json())
          .then(data => {
        
          });
      }
  }

---

顺便说一句，你有打字错误

method = "POST",

您不能在对象中执行此操作

应该是

method: "POST",

API呢：只需将您的响应分配到本地状态。像这样的

.then(data => {
  this.setState(state => {
    return {
     ...state,
     state.items: data
    }
  })
});

---

您正在混合基于类的React组件和基于函数的React组件。在后者中，您不定义诸如

constructor

和

componentDidMount

之类的函数。相反，您可以使用React钩子执行类似的操作。在组件中，首先定义初始状态：

const [show, setShow] = useState(false);
const [items, setItems] = useState([]);

然后，您可以使用

useffect

钩子在组件首次装载时调用一次操作：

useEffect(() => {

}, []);

通过在末尾向它传递一个空的依赖项数组，实际上就是告诉它只对此组件执行一次操作。如果要在该数组中包含值，则每当其中一个值发生更改时，它都会重复该操作

在此操作中，您将调用API调用并使用结果更新状态：

useEffect(() => {
  const requestOptions = {
    method: "POST",
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title: 'React POST Request Example' })
  };
  fetch("https://website/api/home",requestOptions)
    .then(response => response.json())
    .then(data => {
      // HERE you would call setShow and/or setItems to update your state
    });
}, []);

在所有这些之后，功能组件将返回呈现组件的实际JSX，在该JSX中，您将使用状态值

---

重要提示：在上面的代码中，我还悄悄地更正了您的一个打字错误。您的

requestOptions

对象使用了无效语法来构建该对象。您的三个属性中有一个属性使用了

=

来赋值，而不是像其他两个属性那样使用

：

。

到底有什么帮助？您的代码中有什么不起作用？另外，为什么要在带有挂钩的功能组件中使用

构造函数

和

组件安装

？我不希望有任何东西来执行您定义的那些函数。这似乎是React不同结构的奇怪混合。我如何在函数中调用api？现在被CORS策略问题阻止了。@ManishTiwari:这是一个完全独立的问题，与原始问题无关。在你最喜欢的搜索引擎上快速搜索，会发现很多关于CORS的信息，以及已经解决了它的现有堆栈溢出问题。我们鼓励您查看这些问题，看看是否能够解决该问题。完全有可能API不允许跨源请求，也不允许您以这种方式使用它。