Reactjs 如何在react中使用arraylist中的map（）渲染模态

我有9个按钮，我想打开一个模式，其中包含每个模式的数据。例如，单击Burgers按钮=>Burgers模式显示来自my arraylist的数据，单击甜点按钮=>desserts模式显示来自arraylist的数据。下面是我的代码，但我得到一个错误，对象作为React子对象无效（找到：具有键{id，service，description（这些是我的arraylist中的键）}的对象）。如果要呈现子对象集合，请改用数组

从下面的代码中可以看到，我有一个按钮，每个arraylist被渲染了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>
    );
}

let filelist=[
{“id”：1，“服务”：“InHome服务”，“描述”：“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的+
“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的佼佼者”+
“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的”}，
{“id”：2，“服务”：“消费者直接”，“描述”：“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的
+    
“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的佼佼者”+
“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的”}，
{“id”：3，“服务”：“私人值班服务”，“描述”：“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的+
“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的佼佼者”+
“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的佼佼者”+
“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的”}，
{“id”：4，“服务”：“家常琐事”，“描述”：“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的+
“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的佼佼者”+
“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的佼佼者”+
“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的”}，
{“id”：5，“服务”：“护理服务”：“描述”：“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的+
“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的佼佼者”+
“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的佼佼者”+
“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的”}，
{“id”：6，“服务”：“临时护理服务”，“描述”：“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的+
“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的佼佼者”+
“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的佼佼者”+
“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的”}，
{“id”：7，“服务”：“ASL护理服务”，“描述”：“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的+
“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的佼佼者”+
“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的佼佼者”+
“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的”}，
{“id”：8，“服务”：“预付费”和“说明”：“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的
+
“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的代表”+
“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的佼佼者”+
“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的”}，
{“id”：9，“服务”：“健康儿童”，“描述”：“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的”+
“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的佼佼者”+
“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的佼佼者”+
“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是该行业的”}
];
导出默认函数服务（）{
const[showmodel，setshowmodel]=useState（）；
const[selectedFile，setSelectedFile]=useState（）；
const handleClose=（）=>setshowmodel（false）；
常量handleCancel=（）=>{
设置显示模式（假）；
setSelectedFile（空）；
};
常量handleDelete=（）=>{
设置显示模式（假）；
//删除
警报（`${selectedFile}已被删除`）；
setSelectedFile（空）；
};
返回(
{filelist.map（（文件=>