从 firebase 检索子值并在输入标签中使用 react js

如何解决从 firebase 检索子值并在输入标签中使用 react js

我正在尝试获取 child 的值并在表单的输入标签中使用该值，以便我可以使用我的 React 应用程序向电话号码发送短信，但我似乎不知道如何操作。我正在将 twillo 与 express 一起使用，我已将其配置为接受输入字段中的电话号码和文本区域来编写 SMS，但是当我提交时，它显示以下错误是用于从数据库中检索数据的代码

useEffect(() => {
    firebaseDb.child("bookings").on("value",(snapshot) => {
   
  if (snapshot.val() !== null) {
    setData({
      ...snapshot.val(),});
    
  } else {
    snapshot({});
    document.getElementById('phoneNumber').value = snapshot.val();
    

      }
    });
  },[id]);

下面是用于显示用户列表的代码

 {Object.keys(data).map((userId) => {
            if (userId === id) {
              return (
                <div>
                  
                  {/* form */}
                  <form onSubmit={onSubmit}>
                    <div>
                      <span className="" style={{ fontSize: 13 }}>
                        Passenger Name
                      </span>
                      <p
                        className=""
                        style={{ color: "#818181",fontSize: 13 }}
                      >
                        {data[id].passengerName}
                      </p>
                      <hr />
                    </div>
                    <div className="mb-0">
                      <label
                        className="form-label mb-0"
                        style={{ fontSize: 13 }}
                      >
                      </label>
                      <input
                        type="text"
                        className="form-control border-0 px-0 shadow-none"
                       
                        value={data[id].phoneNumber}
                        style={{ color: "#818181",fontSize: 13 }}
                        onChange={(e) => setNumber(e.target.value)}
                      />
                      <hr />
                    </div>
                    <textarea
                      value={body}
                      onChange={(e) => setBody(e.target.value)}
                      cols="40"
                      rows="5"
                      className="form-control mb-3 "
                    ></textarea>
                    <div className=" mb-3 d-flex align-items-center justify-content-center">
                      <button className="btn btn-secondary rounded-pill shadow-none px-3">
                        Confirm Ride
                      </button>
                    </div>
                  </form>
                   {console.log(`Number is ${number} and the Message is ${body}`)}
                </div>
              );
            }
          })}

这是使发送短信文本成为可能的代码

//binding the sms form
  const [number,setNumber] = useState("");
  const [body,setBody] = useState("");





//setting up the send text function
   const onSubmit = async (e) => {
    await e.preventDefault();

const res = await fetch("/api/sendMessage",{
  method: "POST",headers: {
    "Content-Type": "application/json",},body: JSON.stringify({ to: number,body: body }),});

const data = await res.json();

if (data.success) {
  await setNumber("");
  await setBody("");
} else {
  await setNumber("An Error has occurred.");
  await setBody("An Error has occurred.");
    }
  };

下面是我在使用方法时得到的错误

A 'To' phone number is required.

那么我如何检索子值并将其用作输入标签中的值