Реагировать useEffect ловушка зависит от второго эффекта - PullRequest
Новая
       46

Реагировать useEffect ловушка зависит от второго эффекта

0 голосов
/ 25 октября 2019

Я использую ловушку useEffect для асинхронной выборки данных, когда мой компонент изначально монтируется. Я также хотел бы использовать эффект (или другую ловушку, которая лучше подходит для этой ситуации) для преобразования этих данных, в том числе и при первоначальном монтировании моего компонента.

Ссылочный контекст и инициализация enhancedSections localсостояние 

  const displayContext = useContext(DisplayContext);
  const { sections } = displayContext;

  const schemaContext = useContext(SchemaContext);
  const { schema, getSchema } = schemaContext;

  const [enhancedSections, setEnhancedSections] = React.useState(sections);

Получить данные при монтировании (работает) 

  useEffect(() => {
    async function fetchData() {
      await getSchema()
    }
    fetchData();
  }, []);

Преобразовать извлеченные данные и setEnhancedSections проблема здесь в том, что schema все еще нулевой в этой точкевсе еще проблема) ... 

 if(schema && sections){
      let newSectionArr = [];
       ...
    }

Я понимаю, что должен использовать несколько эффектов для разделения проблем в соответствии с документами React, но я не уверен, как заставить один эффект "ждать" другого.

Спасибо за вашу помощь.

1 Ответ

1 голос
/ 25 октября 2019

Вторая часть не обязательно должна быть в useEffect, она просто получена из вашего существующего состояния. Вы попали в бесконечный цикл, потому что вы вызываете setEnhancedState, но enhancedState является производным и не должно существовать в самом состоянии. Ваш последний компонент может выглядеть примерно так: 

const displayContext = useContext(DisplayContext);
const { sections } = displayContext;

const schemaContext = useContext(SchemaContext);
const { schema, getSchema } = schemaContext;

// No need for redundant enhancedSections state

useEffect(() => {
  async function fetchData() {
    await getSchema()
  }
  fetchData();
}, []);

let enhancedSections = [];
const schemaData = schema ? schema.data : [];
Object.entries(sections).forEach(section => {
  let sectionKey = section[0];
  for(var i = 1; i < section.length; i++){
    section[i].forEach(item => {
      let table = schemaData.find(table => table[item.definition.table_name]);
      if (table) {
        let obj = table[item.definition.table_name].columns.find(column => column.field === item.definition.field_name);
        if (obj) {
          item.definition.description = obj.description;
          item.section = sectionKey;
          enhancedSections.push(item);
        }
      }
    });
  }
});

// Use enhancedSections as you need now
...