Hooks 中的 for 循环和 if 语句？答案

【问题标题】：For loops and if statements in Hooks?Hooks 中的 for 循环和 if 语句？
【发布时间】：2021-06-27 23:46:18
【问题描述】：

有没有一种方法可以在不违反钩子规则的情况下使用for loops 和if statements？详细地说，我目前正在尝试比较两个列表（allData 和 currentSelection），如果有相似之处，我会将它们添加到另一个列表中（favData）。但是，我经常遇到可见性问题或错误。如果我能得到一些帮助，我将不胜感激！

const [favData, setFavData] = useState([]);    
useEffect(() => {     
    getFilterFavMeal();   
}, []);    
function getFilterFavMeal() {        
    allData.forEach((mealList) => {            
        currentSelection.forEach((mealList2) => {                
            if (mealList["menu_item"]["menu_item_id"] === mealList2.value) {                             
            // with push, I have visibility issues 
//                       favData.push(mealList);                       
                setFavData(mealList);                
            }            
        });        
    });        
    setFavData(favData);    
}

【问题讨论】：

标签： javascript react-native for-loop if-statement

【解决方案1】：

useState 返回的 set 函数更新状态并安排重新渲染组件，以便 UI 可以更新。在一次渲染中多次调用 set 函数是没有意义的。

您也不希望使用 push 之类的函数来改变 React 状态。

由于 favData 看起来是确定性的，您可以简单地将其从组件状态中移除并在渲染循环中进行计算。

const favData = allData.filter(a => currentSelection.some(c => c.value === a.menu_item.menu_item_id));

回答你原来的问题，当然你可以使用循环。只要你不改变现有的状态对象。并且不要在每次渲染中多次设置状态。

const FF = () => { 
  const [list, setList] = useState([]);

  const addStuffToList = () => {
    const tail = Array.from(new Array(3)).map((_e, i) => i);
    // Build a new array object and use that when setting state
    setList([...list, ...tail]);
  }

  const forLoop = () => {
    const tail = [];
    for (let i = 0; i < 4; i++) {
      tail.push(i);
    }
    // Same thing
    setList([...list, ...tail]);
  }

  return ...
};

【讨论】：

非常有见地！非常感谢！