[英]Return a filtered array based on user input javascript
我有一个用户输入。
基于该输入,我需要过滤一组选项。
我已经能够提交数据,我现在在我的handleSubmitData
function 中,我正在编写if
条件,然后应该将过滤后的结果数组返回到屏幕,但这并没有发生。 它一定与 scope 有关,但我似乎无法弄清楚出了什么问题。 这是代码。 任何指导都会有所帮助
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
部分中,但没有任何反应,没有过滤卡片..
如果您返回某些东西,它不会再次重新渲染它,您必须更新 state
对于 EX:
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;
在 handleSubmitData 上将过滤后的卡片设置为cards
handleSubimitData
。
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;
如果您想查看 UI 中的更改,请更改 state,而不是执行这些return
语句。 (使用setCards
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.