如何设置 props 的默认值

Question

下面的代码获取 URL 数据并检索所有持续时间以秒为单位的电影列表但我只想列出持续时间超过 5000 秒的电影 *该组件应该有一个 prop minDuration 并且仅列出持续时间超过 5000 秒的电影应列出该值；该属性的默认值应该是 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 }) => { ... }

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

Answer 2

要设置组件的默认 props，您可以使用 defaultProps 属性

class Tooltip extends React.Component {
// ...
}

Tooltip.defaultProps = {
delay: 100,
}