我有9个按钮，我想打开一个包含每个模态数据的模态。例如，点击汉堡包按钮=>汉堡模式出现与数据从我的数组列表，甜点按钮被点击=>甜点模式显示了来自甜点数组列表的数据。我有下面的代码，但我得到一个错误对象是无效的，作为一个React子(发现:对象与键{id，服务，描述(这些是我的数组列表中的键)})。如果您打算呈现子元素的集合，请使用数组。
从下面的代码中可以看到，我有一个按钮被渲染了9次，每个数组列表。此外，我想从服务组件中删除arraylist，并从它自己的组件中导入arraylist，因为它占用了多少行。这方面的建议也会很好。
有很多Lorem Ipsum，因为这是每个服务的描述长度。
let filelist = [
{"id": 1, "service": 'InHome Services', "description": 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys' +
' Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys' +
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys'},
{"id": 2, "service": 'Consumer Direct', "description": 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys '
+
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys' +
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys '},
{"id": 3, "service": 'Private Duty Service', "description": 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' +
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys' +
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' +
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys '},
{"id": 4, "service": 'Home-make Chore', "description": 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' +
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys' +
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys' +
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys'},
{"id": 5, "service": 'Nursing Care Service', "description":'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' +
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' +
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' +
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' },
{ "id": 6, "service": 'Respite Care Service', "description": 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys' +
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' +
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' +
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys '},
{"id": 7, "service": 'ASL Care Service', "description": 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' +
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' +
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' +
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys '},
{"id": 8, "service": 'Advance Care', "description": 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys'
+
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industryse' +
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' +
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys '},
{"id": 9, "service": 'Healthy Children', "description": 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys' +
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' +
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ' +
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys '}
];
export default function Services() {
const [showModal, setShowModal] = useState();
const [selectedFile, setSelectedFile] = useState();
const handleClose = () => setShowModal(false);
const handleCancel = () => {
setShowModal(false);
setSelectedFile(null);
};
const handleDelete = () => {
setShowModal(false);
//delete
alert(`${selectedFile} has been deleted`);
setSelectedFile(null);
};
return(
<div className="App" style={{ marginTop: "222px" }}>
{filelist.map((file => {
return (
<div>
<Button
style={{ margin: "2px" }}
onClick={() => {
setSelectedFile(file);
setShowModal(true);
}}
>
{file}
</Button>
</div>
)
}))
}
<Modal show={showModal} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>
Are you sure you want to delete {selectedFile}?
</Modal.Title>
</Modal.Header>
<Modal.Footer>
<Button variant="secondary" onClick={handleCancel}>
Close
</Button>
<Button variant="primary" onClick={handleDelete}>
Yes
</Button>
</Modal.Footer>
</Modal>
</div>
);
}
您正在使用此按钮呈现对象。{file}
<Button
style={{ margin: "2px" }}
onClick={() => {
setSelectedFile(file);
setShowModal(true);
}}
>
{file}
</Button>
当你在数组filelist中存储对象时，你会想要打印出一个属性或名称。完整的对象不能被react渲染。
<Button
style={{ margin: "2px" }}
onClick={() => {
setSelectedFile(file);
setShowModal(true);
}}
>
{file.service}
</Button>
如果您想存储文件列表，我建议使用JSON。您也可以导入它。至于模板和坚持使用JS，对于假数据，我将使用循环来创建它。
const fileList = ["ServiceA", "ServiceB"].map((service, id) => ({
id,
service,
description: "Lorem ipsum"
}));