为两个组件映射到同一数组两次的替代方法?

Question

我有一个导航栏需要一个对象数组的名称(稍后将是JSON，我只是模拟它)

然后我有一堆使用相同对象数组的accordion组件。

这些都在同一个父组件中(计划.js，这是一个React Router页面)。父类处理openAccordion状态。我觉得使用两个地图很荒谬，但由于地图的性质，我不认为所有的手风琴都在一个容器中而所有的导航条都在另一个容器中是一种好方法。

<nav className="accordion-navbar">
{
plans.map((plan) => {
return(
<AccordionListItem setOpenAccordion={setOpenAccordion} openAccordion={openAccordion} plan={plan}/>
)
})
}
</nav>

{
plans.map((plan) => {
return(
<Accordion setOpenAccordion={setOpenAccordion} openAccordion={openAccordion} plan={plan} setState={setState} state={state}/>
)
})
}

Answer 1

为了显示所有选项，您可以使用单循环来完成，但我认为(类似于对您的问题的评论)双循环解决方案更容易阅读/理解:

const data = [1, 2, 3, 4, 5]
function App(){
const squares = []
const cubes = []
data.forEach(no => {
squares.push(<li>{no * no}</li>);
cubes.push(<li>{no * no * no}</li>);
})
return (
<React.Fragment>
<ul>{squares}</ul>
<ul>{cubes}</ul>
</React.Fragment>
)
}
ReactDOM.render(<App/>, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<div id="root"></div>

这也是可能的，但可能更不容易读:

const data = [1, 2, 3, 4, 5];
function App() {
const { squares, cubes } = data.reduce(
({ squares, cubes }, no) => ({
squares: [...squares, <li>{no * no}</li>],
cubes: [...cubes, <li>{no * no * no}</li>],
}),
{ squares: [], cubes: [] }
);
return (
<React.Fragment>
<ul>{squares}</ul>
<ul>{cubes}</ul>
</React.Fragment>
);
}
ReactDOM.render(<App />, document.getElementById("root"));

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<div id="root"></div>

一个人当然也可以用map()做一个单回路解决方案，但它并没有真正使事情变得更好。