Блог

У меня возникли некоторые проблемы с неудачным типом реквизита при попытке изучить Redux с помощью react. Дело в том, что я хочу создать заметку с заголовком и некоторым текстом, но из-за сбойного типа реквизита будет отображаться только заголовок.

Предупреждения:

 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 свойства или для него установлено значение undefined или null . Возможно, у вас опечатка там, где должно быть установлено это значение.

Если вы видите заголовки, то все остальное, кажется, в порядке.