Question

React 默认 props 被忽略

2017-09-23

3914

reactjs flowtype

我在我的 React 应用中使用 Flow v.0.52 进行输入，但在正确分配默认 props 方面遇到了问题。

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 组件中，默认 props 被忽略，导致 postList.apiData.length 遇到类型错误 Uncaught TypeError: Cannot read property 'length' of undefined

P.S. 链接到文件 News.jsx

Answer 1

您发布的所有代码看起来都很好。

从此错误消息：

未捕获的 TypeError：无法读取未定义的属性“长度”

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

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

Answer 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>
  }
}

Answer 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>;
    }
...