Reactjs 反应太多的重新渲染。使用效果+；useState+；axios

我是个新手，所以我想我还没有正确理解使用效果和使用状态是如何防止这个错误的。我已经尝试将useEffect数组中的状态设置为仅在更改时渲染，但也没有成功。 我正在尝试从knack应用程序（无代码数据库应用程序创建者）构建动态表单配置。因此，最终结果将是我可以用来呈现表单的配置。 下面是我的代码示例

const [fields, setObject] = useState([]);
const [groups, setGroup] = useState();
const [fieldGroupConfig, setFieldGroupConfig] = useState();
const [formConfig, setFormConfig] = useState();


useEffect(() => {

    axios.get(KnackUrl('entityDefinitions-ObjectBased', "object_4"), { headers: KnackHeaders() })
        .then(response => {
            setObject(response.data.object.fields)
        })


    axios.get(KnackUrl('getMultiple-ObjectBased', "object_31"), { headers: KnackHeaders() })
        .then(response => {
            setGroup(response.data.records)
        })

    axios.get(KnackUrl('getMultiple-ObjectBased', "object_32"), { headers: KnackHeaders() })
        .then(response => {
            setFieldGroupConfig(response.data.records)
        })
 
}, [])



if(groups && fieldGroupConfig && fields){
    groups.forEach((group) => {
        group.fields = [];
        fieldGroupConfig.forEach((fieldGroup) => {
          if (fieldGroup.field_333_raw[0].id === group.id) {
            fields.forEach((field) => {
              if (fieldGroup.field_330 === field.key) {
                group.fields.push(field);
              }
            });
          }
        });
    });
    setFormConfig(groups);
    
}
console.log('group prepared =>', formConfig);

---

提前谢谢

您正在更新useEffect中的状态，该状态将强制组件重新加载。您可以在这里阅读有关生命周期的更多信息，您的

组。map

在每次迭代中设置表单配置，您将丢弃

map

的结果。虽然我不确定所有这些都实现了什么，但我假设您希望在状态中存储

映射的结果一次。切勿滥用
map
产生副作用，或作为
forEach
或
filter
@ggorlen您完全正确地认为setState位于map函数中，我对其进行了更改，并尝试使用forEach，但仍然有相同的结果。（我更新了上面的代码）。我想要达到的是把所有其他状态结合在一起的结果放在一个状态中。