Javascript 为什么使用效果在'；什么是数组依赖项更改？

所以，我几乎必须进行两次API调用才能获得一些数据，我用这些数据更新状态（两个数组：allOrgList和patientOrgList）。接下来，我需要比较这两个数组的状态，找出它们之间的差异，然后将其更新为状态

我要做的是使用useEffect跟踪这两个阵列，当它们发生变化时，运行扩散函数。但是，从未调用触发此扩散函数的useEffect。尽管allOrgList和patientOrgList正在从空数组变为包含多个项的数组

我尝试过创建依赖项[allOrgList.length，patientOrgList.length]和[JSON.stringify（allOrgList.length），JSON.stringify（patientOrgList.length）]，这将更新我的DifferenceDorgOptions状态，但它会继续调用useEffect，并且我会收到一个错误，说Rerender太多了

下面是一些代码：

const [diffedOrgOptions, setDiffedOrgOptions] = useState([]);
const [allOrgList, setAllOrgList] = useState([]);
const [patientOrgList, setPatientOrgList] = useState([]);

  const getAllOrgs = () => {
    console.log('Get all org fires')
    const tempOrgList = [];

    trackPromise(
      GetAllOrganization()
        .then(data => {
          data.forEach(ele => tempOrgList.push({name: ele.name, organization_cis_id: ele.organization_cis_id}))
        })
        .then(setAllOrgList(tempOrgList))
        .catch(error => console.log(error))
    );
  };

  const getPatientOrgs = () => {
    const tempOrgList = [];

    props.patientDetails[0].organization_cis_ids.forEach(orgId => {
      trackPromise(
        GetOrganizationName(orgId)
          .then(data => tempOrgList.push({name: data[0].name, organization_cis_id: orgId}))
          .catch(error => console.log(error))
      )
    });

    setPatientOrgList(tempOrgList);
  };

  const diffOrgLists = () => {
    const tempDiffedOptions = [];
    const diffedList = allOrgList.filter(({ name: name1 }) => !patientOrgList.some(({ name: name2 }) => name2 === name1));
    diffedList.forEach(orgObj => tempDiffedOptions.push(({value: orgObj.organization_cis_id, label: orgObj.name})));
    setDiffedOrgOptions(tempDiffedOptions);
  };

  useEffect(() => {
    getPatientOrgs();
    getAllOrgs();
  }, []);

  useEffect(() => {
      if (allOrgList.length) {
      diffOrgLists();
    }
  }, [patientOrgList, allOrgList]);

试试这个

            const [diffedOrgOptions, setDiffedOrgOptions] = useState([]);
            const [allOrgList, setAllOrgList] = useState([]);
            const [patientOrgList, setPatientOrgList] = useState([]);

            const getAllOrgs = () => {
                console.log('Get all org fires')
                const tempOrgList = [];

                trackPromise(
                GetAllOrganization()
                    .then(data => {
                    data.forEach(ele => tempOrgList.push({name: ele.name, organization_cis_id: ele.organization_cis_id}))
                    })
                    .then(() => {
                        const differentData = diffOrgLists(tempOrgList)
                        setAllOrgList(tempOrgList)
                        setDiffedOrgOptions(differentData)
                    })
                    .catch(error => console.log(error))
                );
            };

            const getPatientOrgs = () => {
                const tempOrgList = [];

                props.patientDetails[0].organization_cis_ids.forEach(orgId => {
                trackPromise(
                    GetOrganizationName(orgId)
                    .then(data => tempOrgList.push({name: data[0].name, organization_cis_id: orgId}))
                    .catch(error => console.log(error))
                )
                });

                setPatientOrgList(tempOrgList);
            };

            const diffOrgLists = (allOrgList) => {
                const tempDiffedOptions = [];
                const diffedList = allOrgList.filter(({ name: name1 }) => !patientOrgList.some(({ name: name2 }) => name2 === name1));
                diffedList.forEach(orgObj => tempDiffedOptions.push(({value: orgObj.organization_cis_id, label: orgObj.name})));
                setDiffedOrgOptions(tempDiffedOptions);
            };

            useEffect(() => {
                getPatientOrgs();
                getAllOrgs();
            }, []);

试试这个

            const [diffedOrgOptions, setDiffedOrgOptions] = useState([]);
            const [allOrgList, setAllOrgList] = useState([]);
            const [patientOrgList, setPatientOrgList] = useState([]);

            const getAllOrgs = () => {
                console.log('Get all org fires')
                const tempOrgList = [];

                trackPromise(
                GetAllOrganization()
                    .then(data => {
                    data.forEach(ele => tempOrgList.push({name: ele.name, organization_cis_id: ele.organization_cis_id}))
                    })
                    .then(() => {
                        const differentData = diffOrgLists(tempOrgList)
                        setAllOrgList(tempOrgList)
                        setDiffedOrgOptions(differentData)
                    })
                    .catch(error => console.log(error))
                );
            };

            const getPatientOrgs = () => {
                const tempOrgList = [];

                props.patientDetails[0].organization_cis_ids.forEach(orgId => {
                trackPromise(
                    GetOrganizationName(orgId)
                    .then(data => tempOrgList.push({name: data[0].name, organization_cis_id: orgId}))
                    .catch(error => console.log(error))
                )
                });

                setPatientOrgList(tempOrgList);
            };

            const diffOrgLists = (allOrgList) => {
                const tempDiffedOptions = [];
                const diffedList = allOrgList.filter(({ name: name1 }) => !patientOrgList.some(({ name: name2 }) => name2 === name1));
                diffedList.forEach(orgObj => tempDiffedOptions.push(({value: orgObj.organization_cis_id, label: orgObj.name})));
                setDiffedOrgOptions(tempDiffedOptions);
            };

            useEffect(() => {
                getPatientOrgs();
                getAllOrgs();
            }, []);

---

有些东西错了，我试图用更现代的方式重写，请仔细看看。 还考虑使用钩子，以及函数，因为这似乎是缺少在您的工具链。 我删除了trackPromise的用法，因为我认为这已经让您完全困惑了。从使用async/await开始，然后再次转到文档并实施

const[differencedorgoptions，setdifferencedorgoptions]=useState（[]）；
常量[allOrgList，setAllOrgList]=useState（[]）；
const[patientOrgList，setPatientOrgList]=useState（[]）；
const getAllOrgs=useCallback（异步（）=>{
log（“获取所有组织火灾”）；
常量tempoglist=（等待GetAllOrganization（））.map(
（{name，organization_cis_id}）=>({
名称
组织机构识别码
})
);
setAllOrgList（临时英语）；
}, []);
const getPatientOrgs=useCallback（异步（）=>{
const temporalglist=等待承诺(
patientDetail.organization\u cis\u ids.map（异步（orgId）=>{
常量[{name}]=等待GetOrganizationName（orgId）；
返回{name，organization\u cis\u id:orgId}；
})
);
设置患者英语（临时英语）；
}，[patientDetail.organization_cis_ID]）；
常量diffOrgLists=useCallback（（）=>{
常量差异列表=allOrgList
.过滤器(
（{name:name1}）=>
！patientOrgList.some（{name:name2}=>name2===name1）
)
.map（（orgObj）=>({
值：orgObj.organization\u cis\u id，
标签：orgObj.name
}));
设置差分选项（差分列表）；
}，[allOrgList，patientOrgList]）；
useffect（（）=>{
getPatientOrgs（）；
getAllOrgs（）；
}，[getPatientOrgs，getAllOrgs]）；
useffect（（）=>{
if（allOrgList.length）{
diffOrgLists（）；
}
}，[DifforgList，allOrgList]）；

有些地方出错了，我试图用更现代的方式重写，请仔细看看。 还考虑使用钩子，以及函数，因为这似乎是缺少在您的工具链。 我删除了trackPromise的用法，因为我认为这已经让您完全困惑了。从使用async/await开始，然后再次转到文档并实施

const[differencedorgoptions，setdifferencedorgoptions]=useState（[]）；
常量[allOrgList，setAllOrgList]=useState（[]）；
const[patientOrgList，setPatientOrgList]=useState（[]）；
const getAllOrgs=useCallback（异步（）=>{
log（“获取所有组织火灾”）；
常量tempoglist=（等待GetAllOrganization（））.map(
（{name，organization_cis_id}）=>({
名称
组织机构识别码
})
);
setAllOrgList（临时英语）；
}, []);
const getPatientOrgs=useCallback（异步（）=>{
const temporalglist=等待承诺(
patientDetail.organization\u cis\u ids.map（异步（orgId）=>{
常量[{name}]=等待GetOrganizationName（orgId）；
返回{name，organization\u cis\u id:orgId}；
})
);
设置患者英语（临时英语）；
}，[patientDetail.organization_cis_ID]）；
常量diffOrgLists=useCallback（（）=>{
常量差异列表=allOrgList
.过滤器(
（{name:name1}）=>
！patientOrgList.some（{name:name2}=>name2===name1）
)
.map（（orgObj）=>({
值：orgObj.organization\u cis\u id，
标签：orgObj.name
}));
设置差分选项（差分列表）；
}，[allOrgList，patientOrgList]）；
useffect（（）=>{
getPatientOrgs（）；
getAllOrgs（）；
}，[getPatientOrgs，getAllOrgs]）；
useffect（（）=>{
if（allOrgList.length）{
diffOrgLists（）；
}
}，[DifforgList，allOrgList]）；

我重写了代码试试这段代码

const [diffedOrgOptions, setDiffedOrgOptions] = useState([]);
            const [allOrgList, setAllOrgList] = useState([]);
            const [patientOrgList, setPatientOrgList] = useState([]);

            const getAllOrgs = () => {
                console.log('Get all org fires')
                const tempOrgList = [];

                trackPromise(
                GetAllOrganization()
                    .then(data => {
                    data.forEach(ele => tempOrgList.push({name: ele.name, organization_cis_id: ele.organization_cis_id}))
                    })
                    .then(() => {
                        const differentData = diffOrgLists(tempOrgList)
                        setAllOrgList(tempOrgList)
                        setDiffedOrgOptions(differentData)
                    })
                    .catch(error => console.log(error))
                );
            };

            const getPatientOrgs = () => {
                const tempOrgList = [];

                props.patientDetails[0].organization_cis_ids.forEach(orgId => {
                trackPromise(
                    GetOrganizationName(orgId)
                    .then(data => tempOrgList.push({name: data[0].name, organization_cis_id: orgId}))
                    .catch(error => console.log(error))
                )
                });

                setPatientOrgList(tempOrgList);
            };

            const diffOrgLists = (allOrgList) => {
                const tempDiffedOptions = [];
                const diffedList = allOrgList.filter(({ name: name1 }) => !patientOrgList.some(({ name: name2 }) => name2 === name1));
                diffedList.forEach(orgObj => tempDiffedOptions.push(({value: orgObj.organization_cis_id, label: orgObj.name})));
                setDiffedOrgOptions(tempDiffedOptions);
            };

            useEffect(() => {
                getPatientOrgs();
                getAllOrgs();
            }, []);

---

我重写代码尝试此代码

const [diffedOrgOptions, setDiffedOrgOptions] = useState([]);
            const [allOrgList, setAllOrgList] = useState([]);
            const [patientOrgList, setPatientOrgList] = useState([]);

            const getAllOrgs = () => {
                console.log('Get all org fires')
                const tempOrgList = [];

                trackPromise(
                GetAllOrganization()
                    .then(data => {
                    data.forEach(ele => tempOrgList.push({name: ele.name, organization_cis_id: ele.organization_cis_id}))
                    })
                    .then(() => {
                        const differentData = diffOrgLists(tempOrgList)
                        setAllOrgList(tempOrgList)
                        setDiffedOrgOptions(differentData)
                    })
                    .catch(error => console.log(error))
                );
            };

            const getPatientOrgs = () => {
                const tempOrgList = [];

                props.patientDetails[0].organization_cis_ids.forEach(orgId => {
                trackPromise(
                    GetOrganizationName(orgId)
                    .then(data => tempOrgList.push({name: data[0].name, organization_cis_id: orgId}))
                    .catch(error => console.log(error))
                )
                });

                setPatientOrgList(tempOrgList);
            };

            const diffOrgLists = (allOrgList) => {
                const tempDiffedOptions = [];
                const diffedList = allOrgList.filter(({ name: name1 }) => !patientOrgList.some(({ name: name2 }) => name2 === name1));
                diffedList.forEach(orgObj => tempDiffedOptions.push(({value: orgObj.organization_cis_id, label: orgObj.name})));
                setDiffedOrgOptions(tempDiffedOptions);
            };

            useEffect(() => {
                getPatientOrgs();
                getAllOrgs();
            }, []);

---

我并不完全理解您的所有代码（我认为其中一些关键部分缺失），但这里肯定有一个错误，这可能是您问题的根本原因：

。然后（setAllOrgList（temporlist））

。我假设它应该是

。然后（（）=>setAllOrgList（temporlist））

否则

orgList

在

getAllOrgs

运行时将始终设置为空数组。我并不完全理解您的所有代码（我认为它的一些关键部分缺失），但这里肯定有一个错误，这可能是问题的根本原因：

。然后（setAllOrgList（temporlist））

。我假设它应该是

。然后（（）=>setAllOrgList（temporalglist））

否则

orgList

在运行

getAllOrgs

时将始终设置为空数组。为什么不使用map函数呢？async/await怎么样？useEffect钩子缺少Dependencies，看起来你只是从他的评论中复制并粘贴了Kelars代码。不是很酷，为什么不使用地图功能呢？async/await怎么样？useEffect钩子缺少Dependencies，看起来你只是从他的评论中复制并粘贴了Kelars代码。不是很酷，为什么不使用地图功能呢？异步/等待怎么样？以及此部分将无法工作

。然后（数据=>{