时间戳

首页 > 解决方案 > 如何修复映射错误“无法解构 'fac' 的属性 'Title'，因为它未定义。” 在反应 JS

html - 如何修复映射错误“无法解构 'fac' 的属性 'Title'，因为它未定义。” 在反应 JS

问题描述

我正在尝试对我的组件使用 react-bootstrap 映射，但出现此错误

无法解构“fac”的属性“标题”，因为它未定义。

我认为当我尝试破坏道具时出了点问题，但我不知道我应该修复哪个部分以及如何修复它。有谁知道如何解决这个问题？提前致谢

这是我的代码：

const facsInfo = [
    {
        Id: "1",
        Title: "De'Spa",
        Description: "dasda",
        upperleftimg:"./Images/photo1.png",
        upperrightimg:"./Images/photo2.png",
        bottomleftimg:"",
        bottomrightimg:"",
    },
    {
        Id: "2",
        Title: "De'Resto",
        Description: "dsada",
        upperleftimg:"./Images/photo3.png",
        upperrightimg:"./Images/photo4.png",
        bottomleftimg:"dasdas",
        bottomrightimg:"",
    },
]

const Facilities = () => {
    const [currentId, setCurrentId] = useState();

    useEffect(() => {
      console.log(currentId);
    }, [currentId]);
  
    const showSelectedFact = () => {
      var fac = facsInfo.filter((x) => x.Id === currentId)[0];
      const { Title, Description, Id } = fac;
      return (
        <div key={Id}>
          <h1>{Title}</h1>
          <h5>{Description}</h5>
        </div>
      );
    };

    return (
        <>
            <Container fluid>
                <Row className="facsHeader">
                    <Col lg={12} >
                        <h1>Facilities</h1>
                        <hr style={{border:'2px solid', color:'#967A50', width:'21.2%'}}></hr>
                    </Col>
                </Row>
            </Container>

            <Container fluid>
                <Row className="facsbuttwrapper text-center">
                    <Col sm={4} lg={4}>
                        <button
                        value="1"
                        className="facsButton"
                        onClick={(e) => setCurrentId(e.target.value)}
                        >
                        De'Spa
                        </button>
                    </Col>

                    <Col sm={4} lg={4}>
                        <button
                        value="2"
                        className="facsButton"
                        onClick={(e) => setCurrentId(e.target.value)}
                        >
                        De'Resto
                        </button>
                    </Col>
                </Row>
            </Container>

            <Container fluid>
                <Row className="text-center">
                    <Col md={12} lg={12}>
                        {showSelectedFact()}
                    </Col>
                </Row>
            </Container>

            <Container fluid>
                <Row>
                    <Col md={12} lg={12}>
                        {facsInfo.map((show) => {
                            const { upperleftimg, upperrightimg, Id } = show;
                            return (
                                <div key={Id} className="FacilitiesImg">
                                    <img src={upperleftimg} alt="Image 1"></img>
                                    <img src={upperrightimg} alt="Image 2"></img>
                                </div>
                            );
                        })}
                    </Col>
                </Row>
            </Container>

            <Container fluid>
                <Row>
                    <Col md={12} lg={12}>
                        {facsInfo.map((show) =>{
                            const {bottomleftimg, bottomrightimg, Id} = show
                            return(
                                <div key={Id} className="FacilitiesImg">
                                    <img src={bottomleftimg} alt="Image 1"></img>
                                    <img src={bottomrightimg} alt="Image 2"></img>
                                </div>
                            )
                        })}
                    </Col>
                </Row>
            </Container>
        </>
    )
}

export default Facilities

标签： htmlreactjs

解决方案

一种可能的方法是，您可以更新showSelectedFact方法以检查currentIdbefore 过滤器，因此，您的代码不会引发异常。

    const showSelectedFact = () => {
  if (currentId) { // check if currentId exists before running the filter
    var fac = facsInfo.filter((x) => x.Id === currentId)[0];
    const { Title, Description, Id } = fac || {};
    return (
      <div key={Id}>
        <h1>{Title}</h1>
        <h5>{Description}</h5>
      </div>
    );
  } else return null
};

推荐阅读