变量在return语句中始终显示未定义

JSON 发表于 Dev

json

我是新来的人，正在使用.map函数列出类别并在return语句中使用变量。但是每次我在return语句中添加变量时，总是说它是未定义的。我真的不知道我在做什么错或如何解决。任何帮助将非常感激。

const NewModal = ({item}) => {
    const [show, setShow] = useState(false);
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    if(Array.isArray(item.modifiers)) {
        const cat_name =   item.modifiers.map(modifier =>
              <div> {modifier.cat_name} </div>
        );
    }

    return (
      <div>
        <a href="#" onClick={handleShow}>{item.item_name} </a>
        <Modal show={show}>
            <Modal.Header>Modal Header</Modal.Header>
           {/*Showing as unfefined*/} <Modal.Body>{cat_name}</Modal.Body>
            <Modal.Footer><Button onClick={handleClose}>Close Modal</Button></Modal.Footer>
        </Modal>
    </div>
    )
}

缺口

在执行类似数组映射之类的操作之前，React中通常使用短路表达式来检查条件。这样可以避免像您当前使用的那样作用域范围较广的变量的麻烦cat_name：

const NewModal = ({item}) => {
    const [show, setShow] = useState(false);
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);
    
    const cat_name = Array.isArray(item.modifiers) && item.modifiers.map(modifier =>
      <div> {modifier.cat_name} </div>
    );

    return (
      <div>
        <a href="#" onClick={handleShow}>{item.item_name} </a>
        <Modal show={show}>
            <Modal.Header>Modal Header</Modal.Header>
           {/*Showing as unfefined*/} <Modal.Body>{cat_name}</Modal.Body>
            <Modal.Footer><Button onClick={handleClose}>Close Modal</Button></Modal.Footer>
        </Modal>
    </div>
    )
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。