React useEffect hook 依赖于第二个效果

Question

当我的组件最初安装时，我正在使用 useEffect 挂钩异步获取数据。我还想使用效果（或更适合这种情况的其他钩子）来转换这些数据，当我的组件最初安装时也是如此。

引用上下文并初始化enhancedSections本地状态

  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
          });
        }
      });
  }, []);

当我将上述内容从 useEffect 中提取并放入基本 if 语句时，它可以工作（无限循环仍然是一个问题）...

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

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

感谢您的帮助。

Answer 1

第二部分不需要在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