反应效果挂钩取决于第二个效果

Question

当我的组件最初挂载时，我使用useEffect钩子异步获取数据。我还想使用一个效果（或另一个更适合这种情况的钩子）来转换这些数据，同样是在我的组件最初挂载时。

引用上下文并初始化增强节本地状态

  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此时仍然为空

  useEffect(() => {
      let newSectionsArr = [];
      const schemaData = schema.data; //schema hasn't fetched yet
      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;
                newSectionArr.push(item);
              }
            }
           setEnhancedSections(newSectionArr); // infinite loop...different problem
          });
        }
      });
  }, []);

当我把上面的内容从use效应中拉出来，放在一个基本的if语句中时，它就起作用了（无限循环仍然是一个问题）...

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

我知道我应该根据React文档使用多种效果来分离关注点，但我不确定如何使一种效果“等待”另一种效果。

谢谢你的帮助。

Answer 1

第二部分不需要在use效应中，它只是从您现有的状态派生出来的。您正在执行一个无限循环，因为您正在调用set增强状态，但是增强状态是派生的，不需要存在于状态本身。您的最终组件可能看起来像这样：

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