按数组顺序呈现元素

Question

const Chat = () => {
const [array1, setArray1] = useState(['one', 'two', 'three', 'four', 'five']);
const [array2, setArray2] = useState(['four', 'two']);
return (
<div>
<ul>
{array1.map((d) => {
return array2.forEach((e) => {
return d === e ? <li>{e}</li> : '';
});
})}
</ul>
</div>
);
};
export default Chat;

我希望我的列表项按顺序呈现:

产生绯闻,two"

产生绯闻,four"

我的逻辑，我将遍历array1，如果我从array2找到匹配，然后将它们输出到渲染器。然而，没有任何东西来渲染。告诉我我做错了什么?

Answer 1

问题是您的for每个方法不返回任何东西，所以您实际上只是返回一个未定义的数组。您可以保持相同的逻辑，尽管将某些东西设置为不会改变的状态有点奇怪:

const Chat = () => {
const [array1, setArray1] = useState(["one", "two", "three", "four", "five"]);
const [array2, setArray2] = useState(["four", "two"]);
return (
<div>
<ul>
{array1.flatMap((d) => {
return array2.map((e) => {
return d === e ? <li>{e}</li> : "";
});
})}
</ul>
</div>
);
};
export default Chat;

因为从技术上讲，您返回的是数组的数组，而平面映射执行相同的逻辑并使结果扁平化。

Answer 2

你可以这样做:

const Chat = () => {
const [array1, setArray1] = useState(['one', 'two', 'three', 'four', 'five'])
const [array2, setArray2] = useState(['four', 'two'])
return (
<div>
<ul>
{array1
.filter((e) => array2.includes(e))
.map((e) => (
<li>{e}</li>
))}
</ul>
</div>
)
}
export default Chat