根据用户输入 javascript 返回一个过滤后的数组

Posted 2023-02-22

【中文标题】根据用户输入 javascript 返回一个过滤后的数组

【英文标题】：Return a filtered array based on user input javascript

【发布时间】：2021-03-24 08:01:15

【问题描述】：

我有一个用户输入。

根据该输入，我需要过滤一组选项。

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

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 部分，但没有任何反应，没有过滤卡..

【问题讨论】：

cards 是一个状态对象，因此如果您想查看结果，您需要使用setCards 更新它。请注意此处的突变，您可能需要第二个状态数组来保存过滤后的结果，以便您可以返回到未过滤的状态。

非常感谢您的解释@pilchard，这是有道理的

【参考方案1】：

在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;

【讨论】：

谢谢@baymax 我决定接受你的回答，因为它更干净，因为我有 4 个 if 语句要包括在内。说得通。下次我需要将过滤后的数据与状态中的数据分开时会记得

【参考方案2】：

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

对于 EX：

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

【参考方案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;

【参考方案4】：

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