TypeError无法读取strapi上未定义的属性url

Question

我有一份物品清单。有些有下载链接，有些则没有。

如果我试图呈现一个未定义的url，我会得到这个错误。所以我试了一下：

if (spectacle.pdf.url) {
    const pdf = spectacle.pdf.url;
    const flag = `/fl_attachment:dossier${spectacle.slug}`;
    const position = 47;
    const output = [pdf.slice(0, position), flag, pdf.slice(position)].join('');
}

但是我现在有另一个错误，告诉我没有定义输出。有没有人能给我解释一下，如果一个函数没有定义，如何停止加载？

slug.js

const Spectacle = ({ spectacle, spectacles, categories }) => {



  const slideRight = () => {
    const slider = document.querySelector('.gallery');
    console.log(slider);
    slider.scrollBy({
      left: 450,
      behavior: 'smooth'
    });
  }

  const slideLeft = () => {
    const slider = document.querySelector('.gallery');
    console.log(slider);
    slider.scrollBy({
      left: -450,
      behavior: 'smooth'
    });
  }

  useEffect(() => {
    const bigTitle = document.getElementById('big-title');
    const vertTitle = document.getElementById('ver-title');
    const title = spectacle.title;
    if (title.length > 30) {
      bigTitle.style.fontSize = "8vw";
      vertTitle.style.fontSize = "3rem";
    }
  }, []);

  
if (spectacle.pdf.url) {
    const pdf = spectacle.pdf.url;
    const flag = `/fl_attachment:dossier${spectacle.slug}`;
    const position = 47;
    const output = [pdf.slice(0, position), flag, pdf.slice(position)].join('');
}


  return (
    <>
      <div className="spectacle-header">
        <img src={spectacle.image.url} />
        <div className="spectacle-titles">
          <h1 id="big-title" className="big-title">{spectacle.title}</h1>
          <h5 className="subtitle">{spectacle.sousTitre}</h5>
        </div>
      </div>
      <Container className="spectacle-text">
        <Row className="bloc-mob">
          <Col className="ext a">
            <h1 id="ver-title" className="vertical-title red">{spectacle.title}</h1>
            <h2 className="quote shows">{spectacle.citation}</h2>
          </Col>
          <Col className="middle-col">
            <p className="">
              <Moment format="YYYY" className="date">{spectacle.year}</Moment>
            </p>
            <Row className="status">
              <Col>
                <span>{spectacle.status}</span>
              </Col>
              <Col>
                <span>{spectacle.category.name}</span>
              </Col>
            </Row>
            <div>
              <p className="description" id='desc'>
                <ReactMarkdown source={spectacle.description} />
                <a href={output} download="newfilename"><h4>Télécharger le document</h4></a>
              </p>
              <div className="video"
              dangerouslySetInnerHTML={{ __html: spectacle.video}} >
              </div>
            </div>
          </Col>
          <Col className="ext b">
            <p className="generic" id="generic">
              <ReactMarkdown source={spectacle.cast} />
            </p>

           
            <div className="scroll-down">
              Scroll down
              <img src="https://res.cloudinary.com/ciefact/image/upload/v1634668021/arrow_0e058f1520.svg"
                className="arrow-down" />
            </div>
          </Col>
          {/* <Col className="illu">
            <img src={spectacle.Illustration.url} />
          </Col> */}
        </Row>

        <Row className="gallery">

          {spectacle.galery.map((item) => (
            <ModalImage
              key={item.id}
              small={item.url}
              large={item.url}
              alt={item.title}
              hideZoom={true}
              hideDownload={true}
            />
          ))}
        </Row>
        <button
          id="slideLeft"
          type="button"
          onClick={slideLeft}
        >
          <img src="https://res.cloudinary.com/ciefact/image/upload/v1634668021/arrow_0e058f1520.svg"
            className="arrow-down" />
        </button>
        <button
          id="slideRight"
          type="button"
          onClick={slideRight}
        >
          <img src="https://res.cloudinary.com/ciefact/image/upload/v1634668021/arrow_0e058f1520.svg"
            className="arrow-down" />
        </button>
      </Container>
    </>
  )
}

export async function getStaticPaths() {
  const spectacles = await fetchAPI("/spectacles")

  return {
    paths: spectacles.map((spectacle) => ({
      params: {
        slug: spectacle.slug,
      },
    })),
    fallback: 'blocking',
  }
}

export async function getStaticProps({ params }) {
  const spectacle = (await fetchAPI(`/spectacles?slug=${params.slug}`))[0]

  const [spectacles, categories] = await Promise.all([
    fetchAPI("/spectacles"),
    fetchAPI("/categories"),
  ])
  return {
    props: { spectacle: spectacle, spectacles, categories },
    revalidate: 1,
  }
}

export default Spectacle 

Answer 1

您在条件块中声明了output，因此它被限制在该特定范围内。您可以在块外声明它，并在以后更新它。

这会导致即使没有可用的pdf，下载链接仍然会出现问题，所以当你没有pdf时，你可能应该隐藏或禁用它：

const hasPdf = Boolean(spectacle.pdf.url);
let output;
if (hasPdf) {
  const pdf = spectacle.pdf.url;
  const flag = `/fl_attachment:dossier${spectacle.slug}`;
  const position = 47;
  output = [pdf.slice(0, position), flag, pdf.slice(position)].join('');
}

{hasPdf && (
  <div>
    <p className="description" id="desc">
      <ReactMarkdown source={spectacle.description} />
      <a href={output} download="newfilename">
        <h4>Télécharger le document</h4>
      </a>
    </p>
    <div
      className="video"
      dangerouslySetInnerHTML={{ __html: spectacle.video }}
    />
  </div>
)}