TypeError:无法读取未定义的“service”的属性

Question

所以我有一个模式，在点击与特定数据相关的按钮后，它会打开并显示数组列表中的数据。当我单击按钮时，代码可以工作，但过了一段时间后，我得到了这个错误TypeError: Cannot read property of service of undefined。如您所见，我还使用了.filter()和.map()来获取数据。

在<Modal.Header>行抛出错误。

    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 => (
          <div>
            <Button
              style={{ margin: "2px" }}
              onClick={() => {
                setSelectedFile(file);
                setShowModal(true);
              }}
              key ={file.id} 
            >
              
              {file.service}
            </Button>
          </div>
      ))}
          <div>
                <div>
                <Modal show={showModal} onHide={handleClose}>
                <Modal.Header closeButton>
                {fileList.filter(file => file.service === selectedFile.service).map(fileFiltered => (
                  <Modal.Title key = {fileFiltered.id} >
                    {fileFiltered.service}?
                  </Modal.Title>
                ))}
              </Modal.Header>
              <Modal.Body>

              </Modal.Body>
              <Modal.Footer>
                <Button variant="secondary" onClick={handleCancel}>
                  Close
                </Button>
                <Button variant="primary" onClick={handleDelete}>
                  Yes
                </Button>
              </Modal.Footer>
            </Modal>
            </div>
          </div>
    </div>
    );
}

Answer 1

问题

我认为问题是您正在以selectedFile状态存储对象，有时它是未定义的或null的，因此file.service === selectedFile.service可能会抛出错误，因为如果它不是对象，则无法访问selectedFile的service属性。

解决方案

改为将service属性存储在状态中。

{fileList.map((file) => (
  <div>
    <Button
      style={{ margin: "2px" }}
      onClick={() => {
        setSelectedFile(file.service); // <-- store service
        setShowModal(true);
      }}
      key={file.id}
    >
      {file.service}
    </Button>
  </div>
))}
<div>
  <div>
    <Modal show={showModal} onHide={handleClose}>
      <Modal.Header closeButton>
        {fileList
          .filter((file) => file.service === service) // <-- check service
          .map((fileFiltered) => (
            <Modal.Title key={fileFiltered.id}>
              {fileFiltered.service}?
            </Modal.Title>
          ))}
      </Modal.Header>
      <Modal.Body></Modal.Body>
      <Modal.Footer>
        <Button variant="secondary" onClick={handleCancel}>
          Close
        </Button>
        <Button variant="primary" onClick={handleDelete}>
          Yes
        </Button>
      </Modal.Footer>
    </Modal>
  </div>
</div>

编辑

我已经用你的共享代码片段和我的解决方案创建了一个运行的codesandbox。

​

​

Answer 2

在您将selectedFile设置为null之后，看起来模态组件正在呈现。尝试为您的模态组件添加条件呈现，以便在selectedFile不存在时不会呈现

{selectedFile && (<Modal>...</Modal>)}