javascript 按数组顺序渲染元素[重复]

evrscar2 于 2023-01-29 发布在 Java

关注(0)|答案(2)|浏览(105)

- 此问题在此处已有答案**：

（17个答案）
What does return keyword mean inside forEach function? [duplicate]（2个答案）
5小时前关闭.

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;

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

"二"
"四"
我的逻辑是，我将遍历array1，如果我在array2中找到匹配项，那么将它们输出到渲染器。然而，根本没有任何东西进入渲染器。告诉我我做错了什么？

JavaScript

来源：https://stackoverflow.com/questions/74854640/render-elements-in-order-by-array

2条答案

按热度按时间

ldxq2e6h1#

问题是你的for each方法没有返回任何东西，所以你实际上只是返回了一个undefined的数组，你可以保持同样的逻辑，尽管把一些东西设置成你不会改变的状态有点奇怪：

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;

因为从技术上讲，你返回的是一个数组的数组，所以flat map执行相同的逻辑，并将结果扁平化。

赞(0）回复(0）举报 2023-01-29

h79rfbju2#

您可以：

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

赞(0）回复(0）举报 2023-01-29

我来回答

javascript 按数组顺序渲染元素[重复]

2条答案

相关问题

热门标签

最新问答