如何在 if 语句中包装一个 useState 变量，但仍然可以在 if reactjs 之外使用它的值

Question

我有以下代码我有一个使用 useState 的 cards 状态变量，我尝试将上面的数组添加到它，但它只是添加了一个空数组，我无法将在 if 内部声明，因为我的变量未定义。我尝试将状态和状态下的所有内容包装在 if 中，但随后我遇到了一些 return 问题。所以重点是传递到 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(() => {
    setCards(stateReplace);
  });

Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

更新#2

  const [cards, setCards] = useState([]);

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

  console.log(stateReplace);

  useEffect(() => {
    setCards(stateReplace);

    console.log(setCards);
  }, [setCards, stateReplace]);

当前输出

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

Answer 1

我会那样做

//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]);

如何在 if 语句中包装一个 useState 变量，但仍然可以在 if reactjs 之外使用它的值

How to I wrap a useState variable in a if statment, but still have it's value be available outside the if reactjs

javascript

meteor

reactjs

use-state