React 默认道具被忽略答案

【问题标题】：React default props are ignoredReact 默认道具被忽略
【发布时间】：2017-09-23 12:15:01
【问题描述】：

我正在使用 Flow v.0.52 输入我的 React 应用程序，但我在正确分配默认道具时遇到问题。

News.jsx

class News extends Component {
  static defaultProps = {
    postList: {apiData: [], total: '0'},
  };

  componentDidMount() {
    this.props.getPostListData(this.props.lang, null, this.props.category);
  }

  props: {
    postList: {apiData: Array<Content>, total: string},
    getPostListData: Function,
  };

  render() {
    const { postList } = this.props;
    let renderNewsCards;

    if (postList.apiData.length !== 0) {
      renderNewsCards = (
        <NewsCards ... />
      );
    } else {
      renderNewsCards = <p style={{ textAlign: 'center' }}>Loader...</p>;
    }
...

在 News.jsx 组件默认道具被忽略，结果postList.apiData.length 遇到类型错误Uncaught TypeError: Cannot read property 'length' of undefined

P.S. Link 归档News.jsx

【问题讨论】：

尝试将static defaultProps = {更改为News.defaultProps = {
@jsw324 不，它不起作用 - ESLint 正在大喊大叫 error Parsing error: Unexpected token
根据错误，听起来postList.apiData是未定义的，而不是postList。似乎postList 是从其他地方作为道具传递的（redux 连接？）并且它没有apiData 属性
@john-shammas 是的，postList.apiData 来自 Redux 商店的道具。因为 reducer 中的初始状态是 {}，因此 postList.apiData 是未定义的，postlist 本身是 {}。但是关于默认道具，道具来自哪里真的很重要吗？
@TarasYaremkiv 如果 redux 传入 {}，那么你的默认 prop 将永远不会被使用

标签： reactjs flowtype

【解决方案1】：

您发布的所有代码看起来都不错。

来自此错误消息：

Uncaught TypeError: Cannot read property 'length' of undefined

我们可以推断postList.apiData 是未定义的，而postList 确实是一个对象。在什么情况下会发生这种情况？好吧，在您提供的链接中，postList 在您的 connect() 过程中被绑定到您的 redux 商店中的某些东西。

当yourReduxStore.postlistData 为空对象时，将出现您收到的错误。在这种情况下，不会使用默认的 props，因为 {} 是一个真实值。

【讨论】：

【解决方案2】：

我觉得打字有问题，我对流脚本没有太多经验。但下面会工作！可以试试回复吗

import * as React from 'react'

type Content = number // assumed content type as number 
type Props = {
  postList: {apiData: Array<Content>, total: string},
  getPostListData: Function,
  lang: string,
  category: string
}

class News extends React.Component<Props> {
  static defaultProps = {
    postList: {apiData: [], total: '0'},
    lang: 'defaultLanguage',
    category: 'defaultCategory'
  }

  componentDidMount() {
    return this.props.getPostListData(this.props.lang, null, this.props.category)
  } 

  render() {
    const { postList } = this.props;

    return postList.apiData.length !== 0 ?
      <div> news Cards </div> :
      <p style={{ textAlign: 'center' }}>Loader...</p>
  }
}

【讨论】：

为什么componentDidMount返回一个函数...，如果你写外部组件类型，那么里面应该添加props: Props;，否则不起作用。

【解决方案3】：

以下解决方案对我有用，希望这能解决您的问题。

class News extends Component {
  static defaultProps = {
    postList: {apiData: [], total: '0'},
  };

  componentDidMount() {
    this.props.getPostListData(this.props.lang, null, this.props.category);
  }

  props: {
    postList: {apiData: Array<Content>, total: string},
    getPostListData: Function,
  };

  render() {
    const { postList } = this.props;
    let renderNewsCards;

    if ((postList.apiData) && Object.keys(postList.apiData).length > 0){
      renderNewsCards = (
        <NewsCards ... />
      );
    } else {
      renderNewsCards = <p style={{ textAlign: 'center' }}>Loader...</p>;
    }
...

【讨论】：