警告：失败的道具types：道具`todos .title`在`TodoList`中被标记为必需的，但是它的值是'undefined`

我想添加标题到我的服务器，如图所示在这里input图像描述

它确定的价值，但它不与标题，标题是在我的数组，因为你可以在图片中，但它仍然来这个错误，道具是在其他JS文件中定义的，在这里的任何帮助

import React from 'react'; import todoInputProps from './TodoInput.props'; const TodoInput = (props) => { let input; const handleClick = () => { props.onAdd(input.value, input.title); input.title = ''; input.value = ''; input.focus(); }; return ( <div> <input type="text" ref={(currentElement) => { input = currentElement; }} placeholder="title" /> <input type="text" ref={(currentElement) => { input = currentElement; }} placeholder="value" /> <button type="button" onClick={handleClick} > add item </button> </div> ); }; TodoInput.propTypes = todoInputProps; export default TodoInput; 

和

 import React from 'react'; import todoItemProps from './TodoItem.props'; import './TodoItem.css'; const TodoItem = (props) => { const remove = () => { props.onRemove(props.id); }; const animateClass = props.animate ? 'added-item' : ''; return ( <li className={`TodoItem-item ${animateClass}`}> <div className="TodoItem-value">{props.value}</div> <div className="TodoItem-title">{props.title}</div> <button onClick={remove} > X </button> </li> ); }; TodoItem.propTypes = todoItemProps; export default TodoItem; 

我的todolist

 import React from 'react'; import TodoItem from './components/TodoItem'; import todoListProps from './TodoList.props'; import './TodoList.css'; class TodoList extends React.Component { constructor() { super(); this.state = {}; this.handleRemove = this.handleRemove.bind(this); } componentWillReceiveProps(nextProps) { nextProps.todos.forEach((todo) => { const oldValue = this.props.todos.find(oldTodo => oldTodo.id === todo.id); const isNewTodo = typeof oldValue === 'undefined'; if (isNewTodo) { this.setState({ addedId: todo.id }); } }); } handleRemove(id) { this.props.onItemRemove(id); } render() { return ( <ul className="TodoList"> { this.props.todos.map(todoItem => ( <TodoItem animate key={todoItem.id} id={todoItem.id} value={todoItem.value} title={todoItem.title} onRemove={this.handleRemove} /> )) } </ul> ); } } TodoList.propTypes = todoListProps; export default TodoList; 

我的cont looks子就是这个样子

 import React from 'react'; import TodoInput from './components/TodoInput'; import TodoList from './components/TodoList'; import { getAll, add, remove } from '../../../utils/todo'; import './TodoContainer.css'; class TodoContainer extends React.Component { constructor() { super(); this.state = { todos: [], }; this.handleRemove = this.handleRemove.bind(this); this.handleAdd = this.handleAdd.bind(this); } componentDidMount() { getAll().then((todos) => { this.setState({ todos }); }); } handleAdd(value, title) { add(value, title).then((id) => { this.setState({ todos: this.state.todos.concat([{ id, value, title, }]), }); }); } handleRemove(id) { remove(id).then(() => { this.setState({ todos: this.state.todos.filter(todoItem => todoItem.id !== id), }); }); } render() { return ( <div className="TodoContainer-wrapper"> <TodoInput onAdd={this.handleAdd} /> <TodoList todos={this.state.todos} onItemRemove={this.handleRemove} /> </div> ); } } export default TodoContainer; 

Answer 1

问题是在TodoInput ，您尝试为两个React实例使用一个variablesinput 。 以下是TodoInput的更正代码：

 const TodoInput = (props) => { let inputTitle, inputValue; const handleClick = () => { props.onAdd(inputTitle.value, inputValue.value); inputTitle.value = ''; inputValue.value = ''; input.focus(); }; return ( <div> <input type="text" ref={(currentElement) => { inputTitle = currentElement; }} placeholder="title" /> <input type="text" ref={(currentElement) => { inputValue = currentElement; }} placeholder="value" /> <button type="button" onClick={handleClick} > add item </button> </div> ); };