javascript - 如何为 props 设置默认值

Question

以下代码获取 URL 数据并检索所有电影列表，持续时间以秒为单位但我只想列出时长超过 5000 秒的电影*该组件应该有一个 Prop minDuration 并且只应列出持续时间超过此值的电影；这个属性的默认值应该是 5000

你能解释一下如何解决这个问题

    import React, { useState, useEffect } from "react";

export default function App() {
  const [films, setFilms] = useState([]);
  
  useEffect(() => {
    const listOfFilms = async () => {
      const response = await fetch(
        "https://api.flixpremiere.com/v1/films/filter/now_showing?limit=10"
      );
      console.log("here", response.data);
      const jsonresponse = await response.json();
      console.log("here11", jsonresponse.films);
      setFilms(jsonresponse.films);
    };
    listOfFilms();
  }, []);
  return (
    <div className="App">
      <h1>Film Title</h1>
      {console.log("films", films.slug, films.films)}

      {films.map((film, index) => (
          <ul>
            <li key={film.title}>
           {film.title} {`(${film.duration_seconds})`} </li>
        </ul>
      ))}
    </div>
  );
}

Answer 1

我将按原样回答问题，即“如何将默认值设置为 props”。

const Component = ({ property = 5000 }) => { ... }

如果您只想根据条件显示某些项目，请使用 filter功能。