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

我有一个用户输入

基于这个输入，我需要过滤一组选项

我已经能够提交数据了，现在我在

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;

const容器=（）=>{
const[cards，setCards]=使用状态([
“学生卡”，
“任意卡”，
“流动卡”，
]);
常量handleSubmitData=（用户输入）=>{
const{employmentStatus}=userInput.state；
const{earnings}=userInput.state；
如果（就业状态==“学生”&收入<16000）{
返回卡片。过滤器（（卡片）=>card！==“liquidCard”）；
}
如果（就业状态==“学生”&&；收入>=16000）{
回程卡；
}
回程卡；
};
返回(
{卡片}
);
};
导出默认容器；

---

我已将

卡片

放在组件的

渲染返回

部分中，但没有发生任何事情。如果您想查看UI中的更改，请更改状态，而不是执行那些

返回

语句。（使用

setCards

）

如果您返回某个内容，它不会再次重新渲染，您必须更新状态

例如：

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

---

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

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;

const容器=（）=>{
const[cards，setCards]=使用状态([
“学生卡”，
“任意卡”，
“流动卡”，
]);
常量[filteredCards，setFilteredCards=useState（[“学生卡”，
“任意卡”，
“流动卡”，]）
常量handleSubmitData=（用户输入）=>{
const{employmentStatus}=userInput.state；
const{earnings}=userInput.state；
如果（就业状态==“学生”&收入<16000）{
setFilteredCards（cards.filter（（card）=>card！==“liquidCard”））
}
否则，如果（就业状态==“学生”&&收入>=16000）{
设置过滤器数据卡（卡片）
}否则{
设置过滤器数据卡（卡片）
}
};
返回(
{filteredCards}
);
};
导出默认容器；

在

HandleSubmitData

上将过滤后的卡片设置为

卡片

状态

const容器=（）=>{
const allCards=['studentCard'，'anywhere card'，'liquidCard']；
const[cards，setCards]=useState（[]）；
const handleSubmitData=userInput=>{
const{employmentStatus}=userInput.state；
const{earnings}=userInput.state；
让过滤=[…所有卡片]；
如果（就业状态==‘学生’和收入<16000）{
过滤=所有卡片。过滤（卡片=>卡片！=='liquidCard'）；
}
设置卡（过滤）；
};
返回(
{卡片}
);
};
导出默认容器；

cards

是一个状态对象，因此如果您想查看结果，需要使用

setCards

对其进行更新。请注意此处的变异，您可能需要另一个状态数组来保存筛选结果，以便您可以返回到未筛选状态。非常感谢@pilchard对senseThank的解释s@baymax我决定使用您的答案，因为它更干净，因为我有4条if语句要包含。有意义。下次我需要将过滤后的数据与状态中的数据分离时，请记住