Реагируйте: как установить состояние, когда нужно заполнить более одного поля - PullRequest
Новая
       43

Реагируйте: как установить состояние, когда нужно заполнить более одного поля

0 голосов
/ 24 мая 2019

Я пытаюсь научиться реагировать.

У меня есть форма, которая использует данные хранилища данных для заполнения массивов, которые являются полями выбора в двух полях формы. Каждый использует свою коллекцию пожарных хранилищ для своего массива.

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

Моя форма имеет: 

state = {
        options: [],
        anzic: [],

    }

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

    async componentDidMount() {
        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
        });
    }

    handleSubmit = (formState, { resetForm }) => {
        const payload = {
            ...formState,
            fieldOfResearch: formState.fieldOfResearch.map(t => t.value),
            industrySector: formState.industrySector.map(t => t.value),
            createdAt: firebase.firestore.FieldValue.serverTimestamp()
            }
            console.log("formvalues", payload);

        fsDB
            .collection("funding_mandate")
            .add(payload)
            .then(docRef => {
            console.log("docRef>>>", docRef);
            resetForm(initialValues);
            })
            .catch(error => {
            console.error("Error adding document: ", error);
            });
    };

    render() {
        const { options } = this.state.options; 
        const { anzic } = this.state.anzic;

Первоначально метод рендеринга имел только: 

const { options } = this.state;

Это сработало нормально. Если я продублирую его для anzic, то массив опций для опций будет пустым списком в форме при рендеринге.

На самом деле я не понимаю, что это за консты, поэтому я изо всех сил стараюсь учиться у других, которые используют обработчики событий для обновления своих форм. Я думаю, что этот подход, вероятно, не предназначен в этом случае, потому что я использую formik для форм.

Я что-то упускаю при настройке состояний массивов?

1 Ответ

0 голосов
/ 24 мая 2019

У вас есть два componentDidMount, удалите другого и используйте один. 

async componentDidMount() {
  // const fsDB = firebase.firestore(); // Don't worry about this line if it comes from your config.
  let options = [];
  let anzic = [];

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

  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({
    options,
    anzic
  });
}
...