java“message”未定义为错误

Question

所以基本上我在努力学习承诺，唯一困扰我的是，我无法将承诺的信息呈现到前端页面。其他一切都很顺利。我还需要了解我们在resolve中还能做些什么，它是函数吗？我们能在那里做更多的活动吗

import "./testAPI.css"
// import react from "react"

function testAPI() {
    let test = new Promise(async (resolve, reject) => {
      const res = await fetch("/testAPI").then((res) => res.json());
      if(res.status === "Successful"){
        resolve("API Fetch is Successful")
      }
      else {
        reject("Could not fetch API")
      }
    })

    test.then((message) => {
      console.log(message)
      return message;
    }).catch((message) => {
      console.log(message)
    })

    return (
      <>
        <div className="message" >This is message {message} </div>
      </>
    );
}
export default testAPI;

我得到的错误是

src/components/testAPI/testAPI.js
  Line 24:52:  'message' is not defined  no-undef

如何在页面上呈现消息变量的值

Answer 1

您需要重写组件以利用

状态-随时间更改值。例如，您有一条消息，除非进行api调用，否则该消息不存在。为了保留随时间变化的值，我们在react中使用statesetMessage将触发组件的重新渲染。因此，您进行了API调用并获得了消息，但是react如何知道您需要显示从API调用获得的消息。因此，reactuseState在数组astate updater function中有第二个元素。如果调用它，组件将重新呈现，导致UI与最新更改同步

useEffect—在安装组件时触发api调用

import "./testAPI.css"
import { useState } from "react"

function testAPI() {
    const [ message , setMessage ] = useState(null);

    const makeApiCall = async () => {
      try {
        const response = await fetch("/testAPI").then((res) => res.json());
        const result = await response.json();

        if(result.status === "Successful"){
          setMessage("API Fetch is Successful")
        }
      }catch(error){
        setMessage("Could not fetch API")
      }
    }

    useEffect(() => {
        makeApiCall()
    }, [])

    return (
      <>
        { message && (<div className="message" >This is message {message } </div>)}
      </>
    );
}
export default testAPI;