数组未正确呈现到列表中答案

state = { activeTab: 0, tabs: [ { id: 0, icon: <AiFillShopping />, label: 'Groceries', content: ['grocery list', 'test'] }, { id: 1, icon: <FaSchool />, label: 'School', content: ['school list', 'test'] } ], value: '', }

let filteredContent = this.state.tabs.filter((tab, index) => { if(index === this.state.activeTab) { return tab; } }) console.log(filteredContent) // logs {id: 0, label: "Groceries", content: Array(2)}

【解决方案1】：

由于content.content 是一个可渲染内容数组，即字符串，它由 React 为您连接并渲染。

您需要先展平嵌套的 content 数组，然后将它们映射到 JSX。

<ul>
  {content
    .flatMap((content) => content.content)
    .map((content) => (
      <li key={content}>{content}</li>
    ))}
</ul>

function App() {
  const content = [
    {
      id: 0,
      // icon: <AiFillShopping />,
      label: "Groceries",
      content: ["grocery list", "test"]
    },
    {
      id: 1,
      // icon: <FaSchool />,
      label: "School",
      content: ["school list", "test"]
    }
  ];
  return (
    <div className="App">
      <ul>
        {content
          .flatMap((content) => content.content)
          .map((content) => (
            <li key={content}>{content}</li>
          ))}
      </ul>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <App />,
  rootElement
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

如果您碰巧只想要一个逗号分隔的内容列表，他们会加入内容数组。

<ul>
  {content.map((content) => (
    <li key={content}>{content.content.join(", ")}</li>
  ))}
</ul>

过滤注意事项

Array.prototype.filter 回调返回一个布尔值，不是结果数组中你想要的元素。您的过滤器代码仅在“意外”下起作用，因为返回 tab 被强制为真实值，并且当索引不匹配时，您将隐式返回 undefined ，这是一个虚假值。您应该只返回条件的结果。

const filteredContent = this.state.tabs.filter(
  (tab, index) => index === this.state.activeTab
);

由于您正在过滤选项卡数组并（大概）呈现它们，那么您可能不想使用数组索引，因为它与任何选项卡本质上都没有关联。使用 tab.id 并存储一个活动标签 ID 是更好的选择，因为 id 与数组中的任何相对位置无关，每个标签对象始终相同。

【讨论】：

哦，太好了，这解决了我的问题！感谢您提供有关过滤的说明，我会确保应用它