如何在反应中使用 arraylist 中的 map() 渲染模态

Question

我有 9 个按钮，我想打开一个模态，其中包含每个模态的数据。例如，单击 Burgers 按钮 => burgers modal 显示来自我的 arraylist 的数据，单击 desserts 按钮 => desserts modal 显示来自 arraylist 的数据在甜点上。我的代码在下面，但我得到一个错误 Objects are not valid as a React child (found: objects with keys {id, service, description (these are the keys in my 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>
    );
}

Answer 1

您正在使用此按钮渲染对象。 {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"
}));

如何在反应中使用 arraylist 中的 map() 渲染模态

How to render a modal with map() from arraylist in react

dictionary

modal-dialog

arraylist

reactjs