Javascript 如何在if语句中封装useState变量，但仍保留它'；s值在if reactjs外部可用

我有下面的代码我有一个使用useState的

cards

state变量，我试图将我的数组添加到它上面，但它只是添加了一个空数组，我无法将状态放入if中，因为当时我的变量未定义。我试着把所有的东西都包装在if中的state和state之前，但是then我得到了一些返回问题。因此焦点转移到

useState（stateReplace）

任何帮助都会很好

import React, { useState, useCallback, useEffect, useMemo } from "react";
import { Card } from "./Card";
import update from "immutability-helper";
import { LeadsBuilderCollection } from "../../api/LeadsCollection";
import { useTracker } from "meteor/react-meteor-data";

const style = {
  width: 400,
};
export const Container = ({ params }) => {
  const { leadsBuilder, isLoading } = useTracker(() => {
    const noDataAvailable = { leadsBuilder: [] };

    if (!Meteor.user()) {
      return noDataAvailable;
    }

    const handler = Meteor.subscribe("leadsBuilder");

    if (!handler.ready()) {
      return { ...noDataAvailable, isLoading: true };
    }

    const leadsBuilder = LeadsBuilderCollection.findOne({ _id: params._id });
    return { leadsBuilder };
  });
  const [cards, setCards] = useState([]);

  let stateReplace = useMemo(() => {
    if (!isLoading && leadsBuilder?.inputs?.length) {
      leadsBuilder.inputs.map((leadInput, i) => {
        ({ id: i, text: leadInput.name });
      });
    }
    return [];
  }, [isLoading, leadsBuilder]);

  useEffect(() => {
    setCards(stateReplace);
  }, [setCards, stateReplace]);

  const moveCard = useCallback(
    (dragIndex, hoverIndex) => {
      const dragCard = cards[dragIndex];
      setCards(
        update(cards, {
          $splice: [
            [dragIndex, 1],
            [hoverIndex, 0, dragCard],
          ],
        })
      );
    },
    [cards]
  );
  const renderCard = (card, index) => {
    return (
      <>
        {isLoading ? (
          <div className="loading">loading...</div>
        ) : (
          <>
            <Card
              key={card.id}
              index={index}
              id={card.id}
              text={card.text}
              moveCard={moveCard}
            />
          </>
        )}
      </>
    );
  };
  return (
    <>
      {isLoading ? (
        <div className="loading">loading...</div>
      ) : (
        <>
          <div style={style}>{cards.map((card, i) => renderCard(card, i))}</div>
        </>
      )}
    </>
  );
};

超出了最大更新深度。当组件在useEffect内部调用setState时，可能会发生这种情况，但useEffect要么没有依赖项数组，要么每个渲染都会更改其中一个依赖项。

更新#2

电流输出

(4) [undefined, undefined, undefined, undefined]
memo
cannot read propery `id`

---

我会那样做

//for preveting updates of memo if ledsBulder will changes on each render
const leadsBuilderRef = useRef(leadsBuilder)

let stateReplace = useMemo(()=>{
  if (!isLoading && leadsBuilder.current?.inputs?.length) {
    return leadsBuilder.current.inputs.map((leadInput, i) => {
      return { id: i, text: leadInput.name };
    });
  }
  return []
}, [isLoading, leadsBuilderRef]);

然后

useEffect(() => {
   setCards(stateReplace);
}, [setCards, stateRepalce]);

---

useffect（（）=>{setCards（stateplace）；}，[setCards]）；我尝试了

useffect（（）=>{setCards（stateplace）；}[setCards]）并且没有显示任何内容，如果我在工作结束时移除设置卡，但在我的更新中忽略了上面看到的错误。您应该在moveCard useCallback dependency arrayUnforuntaley中设置设置卡。我不确定您的意思是什么，或者这意味着我应该做什么。useEffect（（）=>{setCards（stateReplace）；}，[setCards，stateReplace]）;   您不会对stateRepalce更改做出反应。。。只是但这不是op。您应该在UseMoom中记录此值，因为它在每次重新加载时都会更改，所以这将是一个问题。为了清晰起见，我发布了我的全部代码并添加到了您的部分中，但仍然超出了此错误
最大更新深度。当组件在useEffect内部调用setState时，可能会发生这种情况，但useEffect没有依赖项数组，或者每个渲染中的一个依赖项都会更改。
@AndersKitson这是在useEffect中发生的吗？？通过useEffect
中的注释setState检查它，useState（）和useReducer（）钩子的状态更新不支持“+”第二个回调参数。若要在“+”呈现后执行副作用，请在组件体中用useEffect（）声明它
也没有呈现任何内容。就像写入状态一样，没有回调，所以不要将其放入。将console.log放入let stateplace=usemo（（）=>{console.log（“memo”）…）这将允许您检查usemo是否从每次呈现开始
//for preveting updates of memo if ledsBulder will changes on each render
const leadsBuilderRef = useRef(leadsBuilder)

let stateReplace = useMemo(()=>{
  if (!isLoading && leadsBuilder.current?.inputs?.length) {
    return leadsBuilder.current.inputs.map((leadInput, i) => {
      return { id: i, text: leadInput.name };
    });
  }
  return []
}, [isLoading, leadsBuilderRef]);


useEffect(() => {
   setCards(stateReplace);
}, [setCards, stateRepalce]);