`App` 中未指定必需的道具`visibleTodos[0].text`答案

【问题标题】：Required prop `visibleTodos[0].text` was not specified in `App``App` 中未指定必需的道具`visibleTodos[0].text`
【发布时间】：2016-01-20 09:39:08
【问题描述】：

请我尝试将示例 Here 作为 react-react 教程。但是，当onTodoClick 失败并出现以下错误时，代码可以工作

Warning: Failed propType: Required propvisibleTodos[0].textwas not specified inApp. Check the render method ofConnect(App).

Warning: Failed propType: Required proptodos[0].textwas not specified inTodoList. Check the render method ofApp.

下面是我的 App.js

class App extends Component {
    render(){
        // Injected by connect() call:
    const { dispatch, visibleTodos, visibilityFilter } = this.props
        return (
          <div>
                <AddTodo
                    onAddClick={text =>
                    dispatch(addTodo(text))
              } />
                <TodoList
                    todos={visibleTodos}
                    onTodoClick={id =>
                    dispatch(completeTodo(id))
              } />
                <Footer
                    filter={visibilityFilter}
                    onFilterChange={nextFilter =>
                    dispatch(setVisibilityFilter(nextFilter))
              } />
          </div>
        )
    }
}
App.propTypes = {
  visibleTodos: PropTypes.arrayOf(PropTypes.shape({
    text: PropTypes.string.isRequired,
    completed: PropTypes.bool.isRequired
  }).isRequired).isRequired,
  visibilityFilter: PropTypes.oneOf([
    'SHOW_ALL',
    'SHOW_COMPLETED',
    'SHOW_ACTIVE'
  ]).isRequired
}

function selectTodos(todos, filter) {
  switch (filter) {
    case VisibilityFilters.SHOW_ALL:
      return todos
    case VisibilityFilters.SHOW_COMPLETED:
      return todos.filter(todo => todo.completed)
    case VisibilityFilters.SHOW_ACTIVE:
      return todos.filter(todo => !todo.completed)
  }
}

function select(state) {
  return {
    visibleTodos: selectTodos(state.todos, state.visibilityFilter),
    visibilityFilter: state.visibilityFilter
  }
}

export default connect(select)(App)

还有我的待办事项列表

import React, { Component, PropTypes } from 'react'
import Todo from './Todo'

export default class TodoList extends Component{
    render(){
        return(
            <ul>
                {this.props.todos.map((todo, index) =>
                    <Todo {...todo}
                        key={index}
                        onClick={() => this.props.onTodoClick(index)} />
                )}

            </ul>
        )
    }
}

TodoList.propTypes = {
  onTodoClick: PropTypes.func.isRequired,
  todos: PropTypes.arrayOf(PropTypes.shape({
    text: PropTypes.string.isRequired,
    completed: PropTypes.bool.isRequired
  }).isRequired).isRequired
}

当我运行我的应用程序时。我能够在待办事项列表中添加一个项目。但是，当单击 todoItem 时，文本消失，并且上面的两个警告显示在控制台中。

在研究了这些警告之后。我删除了两个文本道具声明，如

TodoList.propTypes = {
  onTodoClick: PropTypes.func.isRequired,
  todos: PropTypes.arrayOf(PropTypes.shape({
    completed: PropTypes.bool.isRequired
  }).isRequired).isRequired
}

还有

App.propTypes = {
  visibleTodos: PropTypes.arrayOf(PropTypes.shape({
    completed: PropTypes.bool.isRequired
  }).isRequired).isRequired,
 ......
}

之后，警告消失。但是，我的 todoItem 消失了onTodoClick。请问我解决这个问题了吗？任何帮助将不胜感激。

【问题讨论】：

我正在做同样的教程，但在同样的警告中崩溃了。从源代码中我可以看到 todos[0].id 指定正确： TodoList.propTypes = { todos: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.number.isRequired, completed: PropTypes.bool.isRequired, text: PropTypes .string.isRequired }).isRequired).isRequired，所以不能去掉id把它放回去。

标签： reactjs redux

【解决方案1】：

您的错误是由于没有为todo 项目生成id。所以警告是正确的，并且正确地说明了缺少的内容。

在reducers.js 中添加例如id: Math.random()，您的警告就会消失。

整个reducer函数：

function todos(state = [], action) {
  switch (action.type) {
    case ADD_TODO:
        return [
            ...state,
            {
                text: action.text,
                completed: false,
                id: Math.random()
            }
        ]
    // other cases 
  }
}

【讨论】：

【解决方案2】：

万一它对任何人有帮助......

我今天正在学习相同的教程并遇到了这个答案。将数字插入ADD_TODO 可以修复上述错误，但TOGGLE_TODO 仍然不适合我。

我不知道这是否是世界上最好的解决方法，但是当我将同一个 reducers.js 文件中的几行向下移动到 case TOGGLE_TODO 位时，我得到了切换工作，并将state.map 函数中的if 语句更改为：

if (todo.id === action.id) { return Object.assign... }

【讨论】：