реагирует на сохранение данных в firestore

#javascript #html #reactjs #firebase #google-cloud-firestore

# #javascript #HTML #reactjs #firebase #google-облако-firestore

Вопрос:

Я создаю приложение в React. Я хотел бы сохранить обновленные данные о ходе выполнения (в процентах после нажатия пользователем кнопки обновления) в firestore, чтобы я мог получить их позже. Прямо сейчас я получаю ошибку «TypeError: не удается прочитать свойство ‘addEventListener’ с нулевым значением», и ничего не сохраняется.

Может кто-нибудь мне помочь?

Прилагается соответствующая часть кода и скриншот firestore

ProgressBar.js

 import React, {useState} from 'react';
import './newprogressbar.css';


const Range = (props) => {
    return (
        <div className="range" style={{width: `${props.percentRange}%`}}/>
    );
};

const ProgressBar = (props) => {
    return (
        <div className="progress-bar">
            <Range percentRange={props.percentRange}/>
        </div>
    );
};

export const ProgressBarContainer = () => {
    let [percentRange, setProgress] = useState(0);

    return (
        <div id="progresscontainer">
            <ProgressBar percentRange={percentRange}/>
                <button id="updatepic" onClick={() => setProgress(percentRange < 100 ? percentRange   10 : 100)}>Daily Update</button>
        </div>
    );
};

Соответствующие части Dashboard.js

 const progress = document.querySelector('#progresscontainer');

progress.addEventListener('submit', (e) => {
  e.preventDefault();
  database.collection('ChallangesChosen').add({
    ProgressPercentageage: progress.percentRange.value

  });
})

  return (
    <div className="Dashboard">
      <Header />
      <div className="circle">
        <img id="leafpicture" src={leafpic} alt="eco-picture" />
        <div className="textIn">
          <h1> You saved </h1>
          <h5>{co2} CO2</h5>
        </div>
      </div>
      <div></div>
      <div className="progressbar">
        <h3>Track your challenges!</h3>
        <div>
          <div> {challs} </div>
        </div>
        {testData.map((item, idx) => (
          <ProgressBarContainer/>

        ))}
      </div>
      <br/>
      <br/>
    </div>
  );

Развернуть фрагмент

Ответ №1:

Это не имеет никакого отношения к Firestore. querySelector просто возвращает null, поэтому вы не можете вызвать addEventListener на progress :

 const progress = document.querySelector('progresscontainer');

Это ожидается, когда ни один элемент не найден с помощью предоставленного селектора

Если вы хотите настроить таргетинг на HTML-элемент по идентификатору querySelector , вам следует использовать хэш:

 const progress = document.querySelector('#progresscontainer');

На самом деле было бы более понятно, если бы вместо этого вы использовали getElementById:

 const progress = document.getElementById('progresscontainer');

Также неплохо проверить результат, чтобы вы могли обнаружить и исправить любые ошибки:

 if (progress) {
    // safely use progress here
}
else {
    // Log something to figure out what went wrong.
}

1. К сожалению, это не решает проблему: (я все еще получаю ту же ошибку

2. Не могли бы вы добавить некоторую отладочную информацию в свой код и объяснить, что работает не так, как вы ожидаете? Сообщение об ошибке ясно — querySelector возвращает null. Это означает, что идентифицированный элемент не найден на странице во время его вызова. Я дал вам несколько советов по этому поводу в своем ответе — вы должны проверить progress наличие нулевого значения перед его использованием.

Ответ №2:

либо добавьте # для селектора запросов

 const progress = document.querySelector('#progresscontainer');

или использовать getElementById метод

 const progress = document.getElementById('progresscontainer');

Ответ №3:

Попробуйте переместить <script> раздел в конец <body> . Я думаю, это единственное решение. @Doug правильно. querySelector возвращает значение null.Не удается его найти