Question

下面的代码获取URL数据并以时长为单位检索所有电影列表但我只想列出持续时间超过5000秒的电影 *组件应具有propminDuration，并且仅列出持续时间大于此值的影片；该道具的默认值为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

唯一的方法是在功能组件中使用默认参数。

const Component = ({ iNeedDefaultValue = "foo" }) => { ... }

不推荐使用其余的（“反应之父”的字眼）。

因为对函数的defaultProps最终将被弃用。

请参阅：https://twitter.com/dan_abramov/status/1133878326358171650

Answer 2

我将回答所写的问题，即“如何为props设置默认值”。

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

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

Answer 3

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

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

Tooltip.defaultProps = {
delay: 100,
}

如何将默认值设置为props

3 个答案: