相关疑难解决方法(0)

在React 功能组件中,这是设置默认道具,使用Component.defaultProps或使用函数定义上的默认参数的更好方法,示例:

默认道具:

const Component = ({ prop1, prop2 }) => (
  <div></div>
)

Component.defaultProps = {
  prop1: false,
  prop2: 'My Prop',
}

默认参数:

const Component = ({ prop1 = false, prop2 = 'My Prop' }) => (
  <div></div>
)    

我在 SO 上遇到了几个关于功能组件的默认 props 的问题，他们都推荐使用 ES6 默认参数。以下是这些问题的链接。

• React - 解构时的 defaultProps 与 ES6 默认参数（性能问题）
• React 功能组件默认道具与默认参数

但是，当我使用该方法编写具有在 props 更改上运行的效果的组件时，我会遇到非基元的不良行为。例如，以下代码将导致无限循环。

const Parent = () => {
  let somethingUndefined;

  return (
    <div>
      <Child prop={somethingUndefined} />
    </div>
  );
};

const Child = ({ prop = {a: 1} }) => {
  const [x, setX] = React.useState(1);

  React.useEffect(() => {
    setX(x + 1);
  }, [prop]);

  return <div>{x}, {prop.a}</div>;
};

ReactDOM.render(<Parent />, document.getElementsByTagName('body')[0]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.11.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>

我尝试了两种尝试规避问题的方法。首先，只需分配一个包含默认值的不同变量，并将未修改的 prop 放入依赖数组中。IE

const Child = ({ prop }) …

下面的代码获取 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})`} …