Return 基于用户输入的过滤数组 javascript

Question

我有一个用户输入。

基于该输入，我需要过滤一组选项。

我已经能够提交数据，我现在在我的 handleSubmitData 函数中，我正在编写 if 条件，然后应该 return 过滤结果数组屏幕然而这并没有发生。这一定与范围有关，但我似乎无法弄清楚出了什么问题。这是代码。任何指导都会有所帮助

const Container = () => {
  const [cards, setCards] = useState([
    "studentCard",
    "anywhereCard",
    "liquidCard",
  ]);
  

  const handleSubmitData = (userInput) => {
    const { employmentStatus } = userInput.state;
    const { earnings } = userInput.state;

    if (employmentStatus === "student" && earnings < 16000) {
      return cards.filter((card) => card !== "liquidCard");
    }
    if (employmentStatus === "student" && earnings >= 16000) {
      return cards;
    }
    return cards;
  };

  return (
    <div className="Container">
      <UserInputForm submitData={handleSubmitData} />
        {cards} 
    </div>
  );
};

export default Container;

我已将 cards 放入组件的 render return 部分，但没有任何反应，因为没有过滤卡..

Answer 1

如果您想查看 UI 中的变化，请更改状态，而不是执行那些 return 语句。（使用 setCards）

Answer 2

如果你return一些东西，它不会再次重新渲染它，你必须更新状态

对于 EX：

const filterdCards = cards.filter((card) => card !== "liquidCard");
setCards(filterdCards);

Answer 3

如果你只想渲染过滤后的卡片，你可以这样做。

const Container = () => {
  const [cards, setCards] = useState([
    "studentCard",
    "anywhereCard",
    "liquidCard",
  ]);
 const [filteredCards,setFilteredCards = useState(["studentCard",
    "anywhereCard",
    "liquidCard",])
  

  const handleSubmitData = (userInput) => {
    const { employmentStatus } = userInput.state;
    const { earnings } = userInput.state;

    if (employmentStatus === "student" && earnings < 16000) {
      setFilteredCards(cards.filter((card) => card !== "liquidCard"))
    }
    else if (employmentStatus === "student" && earnings >= 16000) {
      setFilteredCards(cards)
    } else {
    setFilteredCards(cards)
   }
  };

  return (
    <div className="Container">
      <UserInputForm submitData={handleSubmitData} />
        {filteredCards} 
    </div>
  );
};

export default Container;

Answer 4

在 handleSubimitData 上将过滤后的卡片设置为 cards 状态。

const Container = () => {
  const allCards = ['studentCard', 'anywhereCard', 'liquidCard'];
  const [cards, setCards] = useState([]);

  const handleSubmitData = userInput => {
    const { employmentStatus } = userInput.state;
    const { earnings } = userInput.state;

    let filtered = [...allCards];

    if (employmentStatus === 'student' && earnings < 16000) {
      filtered = allCards.filter(card => card !== 'liquidCard');
    }

    setCards(filtered);
  };

  return (
    <div className="Container">
      <UserInputForm submitData={handleSubmitData} />
      {cards}
    </div>
  );
};

export default Container;

Return 基于用户输入的过滤数组 javascript

Return a filtered array based on user input javascript

javascript

arrays

scope

filter

reactjs