我已经将对象数组传递给<li>"value"属性，然后将该数组附加到状态，但它没有呈现为 html

Question

这是我想要呈现的数据，分配给li标记中的值属性的相应数据在这里以一种状态分配，即在我的情况下为的其他状态

const [otherDetails, setOtherDetails] = React.useState([]);
const state = {
listitems: [
{
id: 1,
vendorContact: "User 1",
otherDetails: [
{
firstName: 'U',
lastName: 'I',
city: 'O',
zip: '560084'
}
]
},
{
id: 2,
vendorContact: "User 2",
otherDetails: [
{
firstName: 'D',
lastName: 'N',
city: 'W',
zip: '560084'
}
]
},
{
id: 3,
vendorContact: "User 3",
otherDetails: [
{
firstName: 'A',
lastName: 'B',
city: 'V',
zip: '560084'
}
]
}
]
};

在这里，我必须在

下呈现数据注意：我将对象的数组传递给li 的值属性

<ul className="sidenavList">
{state.listitems.map(listitem => (
<li key={listitem.id} className="row" value={listitem.otherDetails} onClick={handleSelection}>
{listitem.vendorContact}
</li>
))}
</ul>

最后，这是我尝试使用react 显示数据的地方

<div className="right"> {
<span>{otherDetails}</span>
}
</div>

更新偶数的状态

const handleSelection = (e) => {
e.preventDefault();
setOtherDetails(e.target.getAttribute('value'))

}

Answer 1

我无法根据您的评论回答您的所有特定需求，但这里有一个基本实现，它为每个元素分配一个唯一的id，然后可以在单击处理程序中使用它来检索适当的项并用它更新状态。我不确定您对state变量的需求是什么，无论它们是作为道具来的，还是应该作为自己的useState元素来管理。

const App = () => {
const [otherDetails, setOtherDetails] = React.useState([]);
const state = { listitems: [{ id: 1, vendorContact: "User 1", otherDetails: [{ firstName: 'U', lastName: 'I', city: 'O', zip: '560084' }] }, { id: 2, vendorContact: "User 2", otherDetails: [{ firstName: 'D', lastName: 'N', city: 'W', zip: '560084' }] }, { id: 3, vendorContact: "User 3", otherDetails: [{ firstName: 'A', lastName: 'B', city: 'V', zip: '560084' }] }] };
const handleSelection = (e) => {
const targetItem = state.listitems.find(({ id }) => id == e.target.id)
setOtherDetails(targetItem.otherDetails)
}
return (
<div>
<ul className="sidenavList">
{state.listitems.map(listitem => (
<li key={listitem.id} id={listitem.id} className="row" onClick={handleSelection}>
{listitem.vendorContact}
</li>
))}
</ul>
{otherDetails.length ?
<div className="right">
{otherDetails.map(detail => (
Object.entries(detail).map(([key, val]) => (
<p>{key}<span> {val}</span></p>
))
))}
</div>
: null}
</div>
)
}
ReactDOM.render(
<App />,
document.getElementById("root")
);

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