当数据不更改时，请启发我有关使用效应循环

Question

您好，我有这个组件，经过一些阅读后，我没有估计，当数据中的数据更改时，使用效率再次被调用，但是在我的情况下，这没有变化，我会陷入循环。

export default function Test() {
  
  const [dates, setDates] = useState([]);
  let values = [];
  useEffect(() => {
    getAllFilledJournauxDates().then(function(response) {
      values = response;
      setDates(values);
    }
    );
  }
  , [dates]);
    
  console.log(values);
  


  return(
    <div>
      {dates.map(date => {
        return <div>{date}</div>
      })}
    </div>
  );
}

[edit 2]添加funtion getallfilljournauxdates（）

export async function getAllFilledJournauxDates() {
    
        let dates = [];
        let journaux = getAllJournaux()
            .then(response => {
                Object.keys(response).forEach(element => {
                    dates.push(new Date(new Date(response[element].date)).getFullYear() + "-" + (new Date(response[element].date)).getMonth() + "-" + (new Date(response[element].date)).getDate());
                })
            })
        return dates;
}

[edit]

export default function Test() {
  
  const [dates, setDates] = useState([]);
  let values = [];
  useEffect(() => {
    console.log("useEffect"); // displayed two time in console
    getAllFilledJournauxDates().then(function(response) {
      values = response;
      setDates(values);
      console.log(values); //display the array of dates
    }
    );
  }
  , []);
    
  console.log(values); // display an empty array
  


  return(
    <div>
      {dates.map(date => {
        return <div>{date}</div> // display nothing on screen
      })}
    </div>
  );
}

就像由@rowinbot sugger of @rowinbot我删除了阵列中的变量，但是在屏幕上尚无变量，我可以看到该变量已填充在我的控制台中，并且使用效果看起来像是看起来像他被称为两次... 我想补充一点，首先，我尝试用这些值填充日历

Answer 1

tl; dr：您应该从效果的依赖性数组中删除日期。

效果（又称我们传递给useffect Hook的函数）在渲染后的react run上进行效果，依赖关系数组充当运行效果的逃生舱口，以防万一您要运行效果 bolly /strong>在给定渲染中更新某些依赖项后。

在这里，您要说的是，每当日期更新（其值更改）时，您要运行效果，又调用setDates（...）和突变日期值，这会产生组件的渲染，并且由于日期更改了，效果再次运行，并且……这无限期发生。

只需从依赖项数组中删除日期，您就可以了：

  useEffect(() => {
    getAllFilledJournauxDates().then(function(response) {
      values = response;
      setDates(values);
    }
    );
  }
  , []);

只要记住即使依赖性数组都保持空置在开发上会有所不同）并防止循环。

完全避免脱位阵列（省略）会导致相同的结果，一个无限的循环，这告诉反应，在上，每个渲染都需要运行效果，这会导致另一个渲染...和循环永远。

您可以在 beta react docs 上做得很好总结其语义。

Answer 2

您正在更新使用效果内的日期，这是您更改日期的每一个使用效率重新运行的方法，这会导致它再次重新运行并创建循环。尝试将其他内容触发使用效果而不是日期触发。也许您可以尝试将其更改为“值”，而不是使用日期，并在使用效率之外提取响应，并将其置于值。

useEffect(() => {
      setDates(values);
  }
  , [values]);
    
  console.log(values);