Question

我正在使用 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

Answer 1

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

从此错误消息：

Uncaught TypeError: Cannot read property 'length' of undefined

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

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

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

React默认道具被忽略

News.jsx

3 个答案: