Я пытаюсь научиться использовать реакцию с пожарным.
В моей форме есть 2 варианта выбора, каждый из которых заполняется различными коллекциями записей, хранящихся в firestore.
У меня это работало, когда я использовал только одну коллекцию пожарных, но теперь я пытаюсь добавить секунду, у меня проблемы.
В моей форме есть коллекции с именами abs_for_codes и anzic_codes.
У меня есть эта функция, чтобы загрузить их:
async componentDidMount() {
// const fsDB = firebase.firestore(); // Don't worry about this line if it comes from your config.
let options = [];
await fsDB.collection("abs_for_codes").get().then(function (querySnapshot) {
querySnapshot.forEach(function(doc) {
console.log(doc.id, ' => ', doc.data());
options.push({
value: doc.data().title.replace(/( )/g, ''),
label: doc.data().title + ' - ABS ' + doc.id
});
});
});
this.setState({
options
});
let anzic = [];
await fsDB.collection("anzic_codes").get().then(function (querySnapshot) {
querySnapshot.forEach(function(doc) {
console.log(doc.id, ' => ', doc.data());
anzic.push({
value: doc.data().title.replace(/( )/g, ''),
label: doc.data().title + ' - ANZIC ' + doc.id
});
});
});
this.setState({
anzic
});
}
В консоли видно, что первая коллекция загружается полностью, а первый документ из второй коллекции загружается до появления этой ошибки:
Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'replace' из
не определен
Исходное состояние определяется как:
state = {
options: [],
anzic: [],
}
В методе рендеринга константы определены как:
const { options } = this.state;
const { anzic } = this.state;
И поля формы:
anz_for_codes
<Select
key={`my_unique_select_keyfieldOfResearch`}
name="fieldOfResearch"
isMulti
className={
"react-select-container" +
(errors.fieldOfResearch && touched.fieldOfResearch
? " is-invalid"
: "")
}
classNamePrefix="react-select"
value={values.fieldOfResearch}
onChange={selectedOptions => {
// Setting field value - name of the field and values chosen.
setFieldValue("fieldOfResearch", selectedOptions)}
}
onBlur={setFieldTouched}
options={options}
/>
{errors.fieldOfResearch && touched.fieldOfResearch &&
<ErrorMessage
name="fieldOfResearch"
component="div"
className="invalid-feedback d-block"
/>}
anzic_codes
<Select
key={`my_unique_select_keyindustrySector`}
name="industrySector"
isMulti
className={
"react-select-container" +
(errors.industrySector && touched.industrySector
? " is-invalid"
: "")
}
classNamePrefix="react-select"
value={values.industrySector}
onChange={selectedOptions => {
// Setting field value - name of the field and values chosen.
setFieldValue("industrySector", selectedOptions)}
}
onBlur={setFieldTouched}
options={anzic}
/>
{errors.industrySector && touched.industrySector &&
<ErrorMessage
name="industrySector"
component="div"
className="invalid-feedback d-block"
/>}
Единственное место, где я использую замену, это компонент, который монтировал функцию,
На самом деле я не знаю, что означает этот сегмент (или как найти справочный источник, чтобы выяснить это):
replace(/( )/g, '')
так что не уверен, куда я иду не так. Это работает в abs_for_codes, но кажется неправильным в anzic_codes. Если я удалю этот фрагмент из функции, то массив опций заполняется неопределенным заголовком, а затем кодом ANZIC (который является правильным числом).