使用表单中的值来渲染Firebase中的特定数据 [英] Use value from form to render specific data from firebase

问题描述

在用户从表单中输入控件编号后，我正在尝试从Firebase Firestore数据库中呈现数据.

I'm trying to render data from my Firebase Firestore DB after a user enters a control number from a form.

这是SingleQuery钩子，也就是我的Firestore DB的侦听器

This is SingleQuery hook a.k.a. the listener to my Firestore DB

//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;
}

下面的代码生成用户在输入控制编号后可以看到的内容.搜索框位于< div className ="searchBar"> 下，结果将在< div className ="queryResults">

Code below generates what the user can see after entering the control number. the search box is under <div className="searchBar"> and the result will be generated under <div className="queryResults">

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>
  );
};

很抱歉，如果问题的表述有些混乱，希望能提供一些答案.谢谢！

I'm sorry if the presentation of the question a bit messed up, hoping for some answers. Thanks!

推荐答案

，您需要将 controlNumber 保存为状态并将其传递给SingleQuery挂钩.在SingleQuery挂钩中添加一个检查，以使 controlNumber 不应为空或在进行API调用之前为null.还要在useEffect的依赖项数组中添加 controlNumber .

you need to save controlNumber in state and pass it the SingleQuery hook. Add a check inside SingleQuery hook such that controlNumber should not be empty or null beore making an API call. And also add controlNumber in dependency array of useEffect.

export const violationQuery = () => {
  const [inputControlNumber, setInputControlNumber] = useState("");
  const [controlNumber, setControlNumber] = useState("");

  const drivers = SingleQuery(controlNumber);

  function onSubmit(e) {
     setControlNumber(inputControlNumber);
       e.preventDefault();
  };

  return (
    <Styles>
      <div className="violationQuery">
        <br />
        <br />
        <br />
        <h4>Enter Control Number</h4>
        <div className="searchBar" class="input-group-sm">// class attr won't work. Add it to className.
          <form onSubmit={onSubmit}>
            <input
              type="text"
              className="form-control"
              aria-label="Small" 
              aria-describedby="inputGroup-sizing-sm"
              placeholder="Control Number"
              id="controlNum"   // do not use Id unless you have some special case to handle.
              value={inputControlNumber}
              onChange={(event) => setInputControlNumber(event.target.value);}
            />
            <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>
  );
};

function SingleQuery(controlNumber) {
  const [drivers, setDrivers] = useState([]);

  useEffect(() => {
    const unsubscribe = firebase
      .firestore()
      .collection("drivers")
      .where("controlNumber", "==", controlNumber) //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();
  }, [controlNumber]);

  return drivers;
}

这篇关于使用表单中的值来渲染Firebase中的特定数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！