javascript - React Redux 失败的 prop 类型 : Required prop was not specified

标签 javascript reactjs redux react-redux

我在尝试使用 React 学习 Redux 时遇到了一些失败的 prop 类型问题。 问题是我想创建一个带有标题和一些文本的注释,但由于 Failed 属性类型,仅会显示标题。

警告:

warning.js:36 Warning: Failed prop type: Required prop `notes[0].text` was not specified in `NoteList`.
in NoteList (created by Connect(NoteList))
in Connect(NoteList) (created by App)
in div (created by App)
in App
in Provider

warning.js:36 Warning: Failed prop type: Required prop `text` was not specified in `Note`.
in Note (created by NoteList)
in NoteList (created by Connect(NoteList))
in Connect(NoteList) (created by App)
in div (created by App)
in App
in Provider


ListNotes.js:

import { connect } from 'react-redux'
import NotesList from '../components/NotesList'

const mapStateToProps = (state) => {
    return {
        notes: state.notes
    }
}

const ListNotes = connect(
    mapStateToProps
)(NotesList)

export default ListNotes


NotesList.js:

import React, { PropTypes } from 'react'
import Note from './Note'

const NoteList = ({ notes }) => {
    return (
        <ul>
            {notes.map(note =>
                 <note
                     key={note.id}
                     {...note}
                 />
            )}
        </ul>
    )
}


NoteList.propTypes = {
    notes: PropTypes.arrayOf(PropTypes.shape({
        id: PropTypes.number.isRequired,
        title: PropTypes.string.isRequired,
        text: PropTypes.string.isRequired
    }).isRequired).isRequired
}

export default NoteList


Note.js:

import React, { PropTypes } from 'react'

const Note = ({title, text}) => {
    return (
        <li>
            <h1>{title}</h1>
            <p>{text}</p>
        </li>
    )
}

Note.propTypes = {
    title: PropTypes.string.isRequired,
    text: PropTypes.string.isRequired
}

export default Note

最佳答案

检查state.notes中的内容。您可以记录它或在某处设置断点并使用浏览器的调试器。

该数组中的对象似乎没有 text 属性,或者它设置为 undefinednull。您可能在应该设置该值的地方出现拼写错误。

如果您看到了标题,那么其他一切似乎都按顺序进行。

关于javascript - React Redux 失败的 prop 类型 : Required prop was not specified,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40204250/

相关文章:

javascript - 使用Protractor,如何选择具有唯一类的div并测试它是否显示?

javascript - 从JS中的异步等待响应下载空白pdf文件

javascript - 如何在 Ruby on Rails 应用程序中接受(并解析)www-url 编码的数据?

reactjs - 如何在React Native应用程序中使用React Js组件?

javascript - Image Resizer - 将图像拖到 div 中的问题

javascript - 点击事件在backbone.js中不起作用

javascript - jQuery JavaScript 函数顺序

reactjs - 当我使用 react 测试库、react.lazy 和 suspense Jest 运行相同的测试两次时,为什么加载程序没有在第二次测试中显示?

html - 我想让overflow-x隐藏并且overflow-y可见

javascript - React-bootstrap Navbar 在 React js 中无法正确渲染