Используйте значение из формы для рендеринга определенных c данных из базы данных

Question

Я пытаюсь отобразить данные из моей базы данных Firebase Firestore после того, как пользователь вводит контрольный номер из формы.

Это перехват SingleQuery, который слушает мою базу данных 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;
}

Код ниже генерирует то, что пользователь может видеть после ввода контрольного номера. поле поиска находится под <div className="searchBar">, а результат будет сгенерирован под <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>
  );
};

Извините, если представление вопроса немного испортилось, надеясь на некоторые ответы. Спасибо!

Answer 1

вам нужно сохранить controlNumber в состоянии и передать ему хук SingleQuery. Добавьте проверку внутри хука SingleQuery так, чтобы controlNumber не было пустым или ноль не было при вызове API. А также добавьте controlNumber в массив зависимостей 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;
}

Answer 2

Надеюсь, я понял вопрос. Почему бы не сделать вашу функцию SingleQuery простой функцией с входным параметром (пользовательские данные) и protectQuery в качестве функционального компонента с const [drivers, setDrivers] = useState ([]); и onSubmitFormHandler меняет ваше состояние, вызывая SingleQuery?