Javascript 使用表单中的值从firebase呈现特定数据

在用户从表单输入控件号后，我尝试从Firebase Firestore DB呈现数据

这是SingleQuery hook a.k.a.我的Firestore数据库的侦听器

//Code to Query data from Database
function SingleQuery() {
  const [drivers, setDrivers] = useState([]);

  useEffect(() => {
    const unsubscribe = firebase
      .firestore()
      .collection("drivers")
      .where("controlNumber", "==", {{CONTROL NUMBER FROM FORM}}) //get data according to control number
      .onSnapshot(snapshot => {
        const newDriver = snapshot.docs.map(doc => {
          return {
            // returns a new Object
            id: doc.id,
            ...doc.data()
          };
        });
        setDrivers(newDriver);
      });

    return () => unsubscribe();
  }, []);

  return drivers;
}

下面的代码生成用户在输入控制编号后可以看到的内容。搜索框位于

下，结果将在

下生成

export const violationQuery=（）=>{
const drivers=SingleQuery（）；
返回(






输入控制编号




显示插入控制编号的结果



{drivers.map（driver=>(

控制编号：{driver.controlNumber}


日期和时间：{driver.dateAndTime}


驱动程序名称：{Driver.name}


许可证号码：{driver.licenseNumber}


违规行为：{driver.invalitions}


位置：{driver.latitude}，{driver.longitude}

))}
);
};

---

很抱歉，如果问题的表达有点混乱，希望得到一些答案。谢谢

希望我能理解这个问题。为什么不将SingleQuery函数作为一个简单的函数，使用输入参数（用户数据）和violationQuery作为函数组件，使用const[drivers，setDrivers]=useState（[]）；而onSubmitFormHandler通过调用SingleQuery来更改您的状态？

您需要在状态中保存

controlNumber

，并将其传递给SingleQuery钩子。在SingleQuery钩子中添加一个检查，以便在进行API调用之前，

controlNumber

不应为空或null。并在useEffect的依赖项数组中添加

controlNumber

export const violationQuery=（）=>{
常量[inputControlNumber，setInputControlNumber]=useState（“”）；
常量[controlNumber，setControlNumber]=useState（“”）；
const drivers=SingleQuery（controlNumber）；
提交函数（e）{
setControlNumber（inputControlNumber）；
e、 预防默认值（）；
};
返回(






输入控制编号
//类属性无效。请将其添加到className。
setInputControlNumber（event.target.value）；}
/>




显示插入控制编号的结果



{drivers.map（driver=>(

控制编号：{driver.controlNumber}


日期和时间：{driver.dateAndTime}


驱动程序名称：{Driver.name}


许可证号码：{driver.licenseNumber}


违规行为：{driver.invalitions}


位置：{driver.latitude}，{driver.longitude}

))}
);
};

函数单查询（controlNumber）{
const[drivers，setDrivers]=useState（[]）；
useffect（（）=>{
const unsubscribe=firebase
.firestore（）
.收集（“驱动程序”）
.where（“controlNumber”，“==”，controlNumber）//根据控件编号获取数据
.onSnapshot（快照=>{
const newDriver=snapshot.docs.map（doc=>{
返回{
//返回一个新对象
id:doc.id，
…文件数据（）
};
});
setDrivers（newDriver）；
});
return（）=>unsubscribe（）；
}，[controlNumber]）；
返回司机；
}

您是否询问如何将参数传递给react hook（或实用程序函数），在这种情况下，从表单的

onSubmit

传递到

SingleQuery

hook/函数以返回

驱动程序的数组？你能提供完整的
SingleQuery
功能吗？@drewrese是的，从表单
onSubmit
传递到
SingleQuery
，并将其返回到
驱动程序中，特别是在
的where（）中
SingleQuery
中的
方法能否提供完整的
SingleQuery
函数？@drewrese这就是完整的
SingleQuery
函数。
SingleQuery
和
violationQuery
都在同一个文件中。我并不想粗鲁，但整个函数/钩子都不在那里，您只包括了
useffect
钩子的末尾。
SingleQuery
返回什么？我在
useffect
的依赖项数组中添加了
controlNumber
。我收到两个错误，说
controlNumber
和
onSubmit
都是未定义的。你能提供一个沙盒链接让我们看看吗？我会试试。我可能需要一段时间来准备好的
export const violationQuery = () => {
  const drivers = SingleQuery();

  return (
    <Styles>
      <div className="violationQuery">
        <br />
        <br />
        <br />
        <h4>Enter Control Number</h4>
        <div className="searchBar" class="input-group-sm">
          <form>
            <input
              type="text"
              className="form-control"
              aria-label="Small"
              aria-describedby="inputGroup-sizing-sm"
              placeholder="Control Number"
              id="controlNum"
            />
            <br />
            <input className="btn btn-primary" type="submit" value="Submit" />
          </form>
        </div>

        <div className="queryResults">
          <br />
          <h5>
            Showing results for <b>Insert Control Number</b>
          </h5>
          <br></br>
          <Container>
            <Row>
              <Col>
                <div id="results-list">
                  {drivers.map(driver => (
                    <ol key={driver.id}>
                      <li>
                        <b>Control Number</b>: {driver.controlNumber}
                      </li>
                      <li>
                        <b>Date and Time</b>: {driver.dateAndTime}
                      </li>
                      <li>
                        <b>Driver name</b>: {driver.name}
                      </li>
                      <li>
                        <b>License Number</b>: {driver.licenseNumber}
                      </li>
                      <li>
                        <b>Violations</b>: {driver.violations}
                      </li>
                      <li>
                        <b>Location</b>: {driver.latitude}, {driver.longitude}
                      </li>
                    </ol>
                  ))}
                </div>
              </Col>
              <Col>
                <MapView2 />
              </Col>
            </Row>
          </Container>
        </div>
      </div>
    </Styles>
  );
};