Question

我正在尝试访问我的reducer数组并将其映射为prop。效果很好，但是当我尝试使用ESLint标准化代码时，我需要定义自己的prop-type，因此我将其作为数组来实现。

然后我收到一条错误消息：Warning: Failed prop type: Invalid prop 'articles_list' of type 'array' supplied to 'Content', expected 'object'。

我进行了搜索，发现有人在使用路由器时遇到问题，被建议尝试使用路由器测试版...但是它在ESLint之前有效。我看不出有什么问题...我什至怀疑我的英语理解哈哈..将prop-type切换为object，但是一切正常。

在我的组件中

const mapStateToProps = state => ({
  articles_list: state.articles_list,
});

class Content extends Component {
  ...
}

Content.propTypes = {
  articles_list: PropTypes.shape([]),
};
Content.defaultProps = {
  articles_list: [],
};

在我的减速器中

const initialState = {
  articles_list: [],
}

export const reducer = (state = initialState, action) => {
  switch (action.type) {
    case GET_ALL_ARTICLES_PAGE:
      return {
        ...state,
        articles_list: [...state.articles_list, action.payload],
      };
      [...]
  }
}

Answer 1

object返回具有特定形状的Content.propTypes = { articles_list: PropTypes.arrayOf(PropTypes.shape(*your object shape*)), };

尝试以下操作：

   Content.propTypes = {
          articles_list: PropTypes.arrayOf(PropTypes.number),
        };

如果您的数组是数字数组，请尝试：

url = '''
'hello there http://google.com/p/BvluRHRhN16/ this is a test',
      'hello there https://www.instagram.com/p/BvluRHRhN16/',
      'hello there www.instagram.com/p/BvluRHRhN16/ this is a test',
      'hello there https://www.instagram.net/p/BvluRHRhN16/ this is a test'
'''

from urlextract import URLExtract

extractor = URLExtract()
urls = extractor.find_urls(url)
print(urls)

Answer 2

您尝试过吗？

Content.propTypes = {
  articles_list: PropTypes.array,
};

或者如果您想定义数组的形状，则可以使用它

Content.propTypes = {
  articles_list: PropTypes.arrayOf(
    PropTypes.shape({
      code: PropTypes.string,
      id: PropTypes.number,
    })
  ),
};

阅读有关所有可用propTypes here的文档。

将数组作为prop传递，将prop-types定义为array，但是它表示我正在传递对象

2 个答案: