React Native useEffect - 警告：效果函数不得返回除用于清理的函数之外的任何内容

Question

我想实现一个函数来检查 20 个可用座位中的特定座位是否已预订。如果是，则返回红色，如果不是，则返回绿色。

我将 fetch 函数实现为

const getSeatColor = (seat, vid) => {
    const [color, setColor] = useState(0);

    useEffect(async () => {
      const response = await fetch(
        `http://192.168.8.100/dbops/actions/seat_status.php?seat=${seat}&vid=${vid}`
      );
      const result = await response.json();
      setColor(result.message);
    }, []);

    return color;
  };

  const vid = 4;
  const seat1Color = getSeatColor(1, vid);
  const seat2Color = getSeatColor(2, vid);
  const seat3Color = getSeatColor(3, vid);
  const seat4Color = getSeatColor(4, vid);

return (
    <Screen style={{ paddingBottom: 5 }}>
         {/* Seat 1 starts */}
          <TouchableOpacity style={styles.seat} >
            <MaterialCommunityIcons name="seat" size={40} color={seat1Color} />
            <Button title="1" style={{ width: 20 }} color={seat1Color} />
          </TouchableOpacity>
          {/* Seat 1 ends */}
          {/* Seat 2 starts */}
          <TouchableOpacity style={styles.seat} >
            <MaterialCommunityIcons name="seat" size={40} color={seat2Color} />
            <Button title="2" style={{ width: 20 }} color={seat2Color} />
          </TouchableOpacity>
          {/* Seat 2 ends */}
          <View style={styles.seat}></View>
          <View style={styles.seat}></View>
          {/* Seat 3 starts */}
          <TouchableOpacity style={styles.seat} >
            <MaterialCommunityIcons name="seat" size={40} color={seat3Color} />
            <Button title="3" style={{ width: 20 }} color={seat3Color} />
          </TouchableOpacity>
     </Screen>
)

绿色或红色正常，但我收到此警告：效果函数不得返回除用于清理的函数之外的任何内容。

我试过这个How to call an async function inside a UseEffect() in React?，但同样的警告弹出。请帮忙，或者有其他方法可以实现吗？

Answer 1

您将使用 async 关键字直接作为回调参数返回一个承诺。 尝试像这样重写你的 useEffect ：

    useEffect(() => {
    (async() => {
    const response = await fetch(
        `http://192.168.8.100/dbops/actions/seat_status.php?seat=${seat}&vid=${vid}`
      );
      const result = await response.json();
      setColor(result.message);
      })()
    }, []);
      

或将该代码包装在另一个函数中并在 useEffect 中调用它

const fetchData = async () => {
const response = await fetch(
        `http://192.168.8.100/dbops/actions/seat_status.php?seat=${seat}&vid=${vid}`
      );
      const result = await response.json();
      setColor(result.message);
}
useEffect(() => {
    fetchData();
}, []);

Answer 2

useEffect 不接受异步函数。

你可以试试这个：

const getSeatColor = (seat, vid) => {
    const [color, setColor] = useState(0);

    useEffect(() => {
      (async => {
         const response = await fetch(`http://192.168.8.100/dbops/actions/seat_status.php?seat=${seat}&vid=${vid}`);
         const result = await response.json();
         setColor(result.message);
      })();
    }, []);

    return color;
};