Question

我刚开始反应，我正在使用 .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>
    )
}

Answer 1

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>
    )
}

变量在返回语句中一直显示未定义

1 个答案: