React/Typscript 异步等待操作

Question

我正在尝试从服务器读取 3 个 LED 的状态。当页面打开时，我想根据开/关更新 LED 的状态。我正在使用 async/await 和 useState/useEffect。我可以很好地从服务器接收 json，但是当我尝试获取特定 LED 的状态时，我得到了预期的“...”。在函数 ToggleLed() 的返回语句中，我解释了我想要做什么。我可以获取数据，但我需要 LED 的状态，以便我可以正确设置页面上 LED 的颜色。

我提供代码以及调试模式下页面的屏幕截图。

无论我做了什么，我都无法将 LED 的错误（预期）状态转化为可以执行“redLedOn 按钮颜色深红色：按钮颜色非常浅红色”的表单。

import { useState, useEffect } from 'react'

export default function ToggleLED() {

  const getLed = async () => {
    try {
      const webResult = await fetch("/api/get-led");
      const myText = await webResult.text();
      const ledjson = JSON.parse(myText);

      // Log the text and JSON
      console.log(myText);
      console.log(ledjson);

      // Return the JSON
      return ledjson;

    } catch (error) {
      console.log(error);
    }
  };

  const processLedData = async () => {
    const result = await getLed();
    setRedLedOn(result.is_red_led_on);
    
    // Log
    console.log("result.is_red_led_on = " + result.is_red_led_on);
    console.log("redLedOn = " + redLedOn);
  }

  const [redLedOn, setRedLedOn] = useState(processLedData);

  useEffect(() => {
    processLedData();
  }, [])

  return (
    <>
      <h1 className="hdrcenter">Click To Toggle</h1>

      {/* Red button */}
      <div className="container py-4 px-20 mx-0 min-w-full flex flex-col items-center">
        <button className="btnred btn-circle btn-lg h-28 w-28
        text-black
          transition-colors 
          duration-150 
        hover:bg-red-400 
        hover:text-black"
        
        //{*************************************************************
          // Need state of led here to toggle background color such as
          // redLedOn ?  'bg-red-400' : 'bg-red-10'
        // } // But I get little squiggley here saying '...' expected TS(1005)
        
        >
          Led Off
        </button>
      </div>
    </>
  );
}

调试屏幕

Answer 1

不要将

setRedLedOn

的初始值设置为

processLedData

，而是将其设置为

false

 const [redLedOn, setRedLedOn] = useState(false);

为什么？ 由于

processLedData

在代码中不返回任何内容，但它为

redLedOn

设置了一个值 当您使用 useEffect 时，数据将被自动获取并设置为实际值