如何使用react中的arraylist中的map()呈现一个模式

Question

我有9个按钮，我想打开一个模式，其中包含每个模式的数据。例如，单击Burgers按钮，=> burgers模式显示我的数组列表中的数据，单击甜点按钮=>甜点模式显示甜点上数组列表中的数据。我的代码如下，但我得到了一个错误:对象作为React子级无效(发现:具有键{id，service，description (这些是我的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"
}));