Question

我有以下代码：

  const [ ddFilterData, setddFilterData ] = useState('');



useEffect(() => {
      getDropdownData();
  }, [ddFilterData]);

const getDropdownData = async () => {
  if(optionDetails) {
    let filteredData = Promise.all(
      optionDetails.map(async (item, i) => {
          const fltData = await filterData(item, props.items);
          return fltData
        })
      )
      filteredData.then(returnedData => {
        setddFilterData(returnedData);
      })

  }

}

我需要用useEffect执行ddFilerData与新数据或不同数据的时间更改。据我了解，它应该仅在ddFilterData不同时更新或运行否？

当前，它在每次更改时运行。即使您的filteredData没有不同，上面的代码也会进入无限循环。有什么想法我做错了吗？

Answer 1

您的service-worker.js是一个数组。因此，当您执行workbox-runtime-23a7fd67.js时，将为returnedData设置一个新值。因为React使用Object.is进行比较，所以即使数组元素与以前相同，它仍然是一个不同的对象，并且将再次触发setddFilterData(returnedData)，从而导致无限循环。

Answer 2

您的getDropdownData方法正在更新ddFilterData，这会导致重新渲染。在重新渲染时，您会被称为getDropdownData，由于这种循环行为，您将ddFilterData更新为const [ ddFilterData, setddFilterData ] = useState(''); useEffect(() => { getDropdownData(); }, []); useEffect(() => { // put your code here if you want to do something on change of ddFilterData }, [getDropdownData]); const getDropdownData = async () => { if(optionDetails) { let filteredData = Promise.all( optionDetails.map(async (item, i) => { const fltData = await filterData(item, props.items); return fltData }) ) filteredData.then(returnedData => { setddFilterData(returnedData); }) } }。

像这样修改您的代码：

<Stack.Screen
    name="FuncName"
    component={FuncName}
    options={{
    headerTitle:''
}}/>

即使您的变量相同，use useState也会进入无限循环

2 个答案: