如果消息不为空，则显示快餐栏的useEffect，以及如何使用useState？

import React, { useState } from 'react';

function App() {
  const [message, setMessage] = useState(""); // 初始化状态值为空字符串

  return (
    <div>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)} // 更新状态值的函数
      />
      <p>{message}</p>
    </div>
  );
}

export default App;

import React, { useState, useEffect } from 'react';

function App() {
  const [message, setMessage] = useState("");

  useEffect(() => {
    if (message !== "") {
      console.log("快餐栏显示");
    }
  }, [message]); // 依赖项为message

  return (
    <div>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <p>{message}</p>
    </div>
  );
}

export default App;