React Native: отфильтрованный массив не смог передать значение в usestates

Я выделю проблемы и решения, связанные с вашим кодом:

• Когда вы пытаетесь инициализировать свои входы useState, массив medicine еще не готов, поскольку вызов firestore является асинхронным, поэтому, когда поступает массив medicine, начальные значения входов useState(editMedicinName...) будут привязаны к пустому массиву.
• У вас также есть некоторые проблемы с манипулированием данными, поскольку вы помещаете type Array внутри своих editMedicine**** состояний, но затем в обработчиках ввода onChange вы передаете строки: setEditMedicineName(e.target.value)}
• Решение первой проблемы — работа с хуком React useEffects. Первый useEffect выполняется только один раз при монтировании, он вызывает пожарная база данных, извлекает список лекарств и устанавливает его в состояние вашей реакции medicine. Когда medicine обновляется, срабатывает второй useEffect, и внутри него вы можете обновить свои входные базовые значения.
• Вторая проблема решается путем установки непосредственно строковых значений в качестве входных базовых значений.
• И последнее, но не менее важное: я ожидаю, что вы не захотите показывать свою форму, пока не получать medicine данные, поэтому рекомендуется поместить троичный оператор после возврата, чтобы вы могли показывать счетчик во время загрузки операции.

function EditMedicine() {
  const { medicineId } = useParams();

  const [medicine, setMedicine] = useState([]);

  useEffect(() => {
    const q = query(
      collection(db, 'medicine'),
      where('isAccepted', '==', true)
    );
    onSnapshot(q, (querySnapshot) => {
      // setMedicine is called asynchronously
      setMedicine(
        querySnapshot.docs.map((doc) => ({
          id: doc.id,
          data: doc.data(),
        }))
      );
    });
  }, []);
  // Filter medicine array, when it will be retrieved from firestore
  const medicineStock = useMemo(
    () =>
      medicine.filter((medicineStock) => medicineStock.id === medicineId)[0]
        .data,
    [medicine]
  );

  const [editMedicineName, setEditMedicineName] = useState(null);
  const [editMedicineRegNo, setEditMedicineRegNo] = useState(null);
  const [editMedicineType, setEditMedicineType] = useState(null);

  /* Set editMedicineName, editMedicineRegNo and editMedicineType when medicine array is retrieved */

  useEffect(() => {
    if (medicine) {
      setEditMedicineName(medicineStock.medicineName);
      setEditMedicineRegNo(medicineStock.medicineRegNo);
      setEditMedicineType(medicineStock.medicinType);
    }
  }, [medicine]);

  return !medicine ? "Loading..." :(
    <div className="editMedicine">
      <div className="editMedicine-title">Edit Medicine</div>
      <form className="editMedicine-form">
        <div>
          <p>
            <label className="editMedicine-dataTitle">
              Name:&nbsp;&nbsp;&nbsp;
            </label>
            <input
              name="medicineName"
              type="text"
              required
              className="editMedicine-input"
              value={editMedicineName}
              onChange={(e) => setEditMedicineName(e.target.value)}
            />
          </p>
          <p>
            <label className="editMedicine-dataTitle">
              Reg No:&nbsp;&nbsp;&nbsp;
            </label>
            <input
              name="medicineRegNo"
              type="text"
              required
              className="editMedicine-input"
              value={editMedicineRegNo}
              onChange={(e) => setEditMedicineRegNo(e.target.value)}
            />
          </p>
          <p>
            <label className="editMedicine-dataTitle">
              Type:&nbsp;&nbsp;&nbsp;
            </label>
            <select
              className="editMedicine-input"
              value={editMedicineType}
              onChange={(e) => setEditMedicineType(e.target.value)}
            >
              <option value="Tablet">Tablet</option>
              <option value="Capsule">Capsule</option>
              <option value="Liquid">Liquid</option>
              <option value="Spray">Spray</option>
              <option value="Cream">Cream</option>
              <option value="Ointment">Ointment</option>
            </select>
          </p>
        </div>
      </form>
    </div>
  );
}

Существует несколько неправильных представлений о том, как useState работает в вашем коде и вообще о том, как вы можете инициировать повторную визуализацию.

Что происходит в вашем коде:

1. Вы инициализируете свойство состояния medicine пустым массивом -> OK
2. Вы объявляете новую константу medicineStock, которая является отфильтрованной версией medicine. На данный момент medicineStock тоже пустой массив.
3. Вы инициализируете 3 новых свойства состояний с начальным значением, основанным на MedicineStock. Это создаст 3 новых пустых строки. Здесь вы должны понимать, что initialValue состояния предназначен не для его обновления, а только для его инициализации. Если вы обновляете MedicineStock, например, он не будет обновляться editMedicineName.
4. Затем вы получаете некоторые данные и вызываете setMedicine для их сохранения. Это приведет к запуску нового рендеринга. Таким образом, тело вашей функции будет прочитано снова. Конечно, в этот момент medicineStock будет иметь новое значение, поэтому вы можете увидеть это в своем журнале. Но, как я уже говорил, это не обновит editMedicineName, editMedicineRegNo и editMedicineType. Единственный способ обновить эти значения — вызвать их собственные сеттеры.

Как это исправить:

Я действительно не понимаю, чего вы пытаетесь достичь здесь, но простым исправлением для вашего кода будет:

  const [editMedicineName, setEditMedicineName] = useState();
  const [editMedicineRegNo, setEditMedicineRegNo] = useState();
  const [editMedicineType, setEditMedicineType] = useState();

  useEffect(() => {
    const q = query(collection(db, 'medicine'), where("isAccepted", "==", true) )
    onSnapshot(q, (querySnapshot) => {
      const medecine = querySnapshot.docs.map(doc => ({
        id: doc.id,
        data: doc.data()
      }));

      const medicineStock = medicine.filter(medicineStock => medicineStock.id === medicineId);

      setEditMedicineName(medicineStock.map(item => item.data.medicineName).toString());
      setEditMedicineRegNo(medicineStock.map(item => item.data.medicineRegNo).toString());
      setEditMedicineType(medicineStock.map(item => item.data.medicineType).toString());
    })
  },[])