React Hook 未使用 use 设置Effect

Question

我用来从Trello获取一些数据并设置一些状态。首先，我拿起我要找的卡，然后打电话和.一切都很好。然后我进入我的案例，无论我做什么都不会被设定，循环继续运行。为什么所有这些其他钩子都有效，而我的最后一个钩子却不起作用？谢谢。useEffectsetCardsetCardLocationelsesetPublishDate

export default function Home(props) {

  const [performedFetch, setPerformedFetch] = useState(false);

  const [slug, setSlug] = useState(null);

  const [cardLocation, setCardLocation] = useState(1);

  const [card, setCard] = useState(null);

  const [publishDate, setPublishDate] = useState(null);

  const key = ''; // imagine these are here

  const token = '';

  useEffect(() => {

    setSlug(

      new URLSearchParams(window.location.search).get('slug')

    );

    if (!performedFetch && !!slug) {

      fetch(`https://api.trello.com/1/lists/${listId}/cards?key=${key}&token=${token}`)

          .then(response => response.json())

          .then(data => {

            setPerformedFetch(true);

            data.forEach((c, index) => {

              if (c.desc.includes(slug)) {                    

                setCard(c)

                setCardLocation(index + 1)

              } else if (!publishDate && index > cardLocation) { 

                console.log(publishDate); // why is this always null?? also runs multiple times

                const name = c.name;

                const frontHalf = name.split("/")[0].split(" ");

                const month = frontHalf[frontHalf.length - 1];

                const day = name.split("/")[1].split(")")[0];

                setPublishDate(`${month}/${day}`);

              }

            });

        });

    }

  });

Answer 1

正如@TaghiKhavari已经提到的，你应该有两个（对不同关注点的多重影响）。useEffects此外，通过提供依赖项数组作为 的第二个参数来跳过效果来优化性能也很重要。因此，仅当其任何依赖项发生更改时，该效果才会重新运行。useEffect第一个效果：sluguseEffect(() => {  setSlug(    new URLSearchParams(window.location.search).get('slug')  );}, []) // Note: Remove "[]" if you want to set slug at each update / render Or keep it if you want to set it only once (at mount)第二个效果是获取和设置卡和其他细节：useEffect(() => {  if (!performedFetch && slug) {    fetch(      `https://api.trello.com/1/lists/${listId}/cards?key=${key}&token=${token}`    )      .then((response) => response.json())      .then((data) => {        setPerformedFetch(true)      // Note: if there can be only ONE matching card      const index = data.findIndex((card) => card.desc.includes(slug))      if (index > -1) {        const card = data[index]        setCard(card)        setCardLocation(index + 1)        const name = card.name        const frontHalf = name.split('/')[0].split(' ')        const month = frontHalf[frontHalf.length - 1]        const day = name.split('/')[1].split(')')[0]        setPublishDate(`${month}/${day}`)      }      // Setting State in a LOOP? is a problem      /*      data.forEach((card, index) => {        if (card.desc.includes(slug)) {          setCard(card)          setCardLocation(index + 1)        } else if (!publishDate && index > cardLocation) {          const name = card.name          const frontHalf = name.split('/')[0].split(' ')          const month = frontHalf[frontHalf.length - 1]          const day = name.split('/')[1].split(')')[0]          setPublishDate(`${month}/${day}`)        }      })*/    })  }}, [slug, performedFetch])设置状态可能是异步的，以提高性能：因此，您不应像当前所做的那样在循环中设置状态。如果必须循环访问并将数组的所有或几个元素设置为状态，则可以循环遍历数组和局部数组变量中的所有相关项，并在循环结束后将其设置为状态。希望它有帮助！push

Answer 2

这是因为通常以异步方式更新，并且在您检查它时尚未设置react statesslug你需要做这样的事情：function Home(props) {  const [performedFetch, setPerformedFetch] = useState(false);  const [slug, setSlug] = useState(null);  const [cardLocation, setCardLocation] = useState(1);  const [card, setCard] = useState(null);  const [publishDate, setPublishDate] = useState(null);  const key = ""; // imagine these are here  const token = "";  useEffect(() => {    setSlug(new URLSearchParams(window.location.search).get("slug"));  });  useEffect(() => {    console.log(slug)    if (!performedFetch && !!slug) {      fetch(`https://api.trello.com/1/lists/${listId}/cards?key=${key}&token=${token}`)          .then(response => response.json())          .then(data => {            setPerformedFetch(true);            data.forEach((c, index) => {              if (c.desc.includes(slug)) {                                    setCard(c)                setCardLocation(index + 1)              } else if (!publishDate && index > cardLocation) {                 console.log(publishDate); // why is this always null?? also runs multiple times                const name = c.name;                const frontHalf = name.split("/")[0].split(" ");                const month = frontHalf[frontHalf.length - 1];                const day = name.split("/")[1].split(")")[0];                setPublishDate(`${month}/${day}`);              }            });        });    }  }, [slug, performedFetch])}