Javascript 警告：失败的道具类型：道具'todos[0]。标题'在'TodoList'中标记为必需，但其值为'undefined'`

我想向我的服务器添加标题，如图所示

值可以，但不能与标题一起使用，标题在我的数组中，你可以在图片中看到，但仍然会出现此错误，道具在其他JS文件中定义，这里有任何帮助吗

从“React”导入React；
从“./TodoInput.props”导入todoInputProps；
const TodoInput=（道具）=>{
让输入；
常量handleClick=（）=>{
props.onAdd（input.value，input.title）；
input.title=''；
input.value=''；
input.focus（）；
};
返回(
{input=currentElement；}}
占位符=“标题”
/>
{input=currentElement；}}
占位符=“值”
/>
添加项
);
};
TodoInput.propTypes=todoInputProps；
导出默认值到输出；

及

从“React”导入React；
从“/TodoItem.props”导入todoItemProps；
导入“/TodoItem.css”；
const TodoItem=（道具）=>{
常量删除=（）=>{
props.onRemove（props.id）；
};
const animateClass=props.animate？'added item'：''；
返回(

{props.value}
{props.title}
X

);
};
TodoItem.propTypes=todoItemProps；
将默认值导出到doitem；

我的托多利斯特

从“React”导入React；
从“./components/TodoItem”导入TodoItem；
从“/TodoList.props”导入todoListProps；
导入“/TodoList.css”；
类TodoList扩展了React.Component{
构造函数（）{
超级（）；
this.state={}；
this.handleRemove=this.handleRemove.bind（this）；
}
组件将接收道具（下一步）{
nextProps.todos.forEach（（todo）=>{
const oldValue=this.props.todos.find（oldTodo=>oldTodo.id==todo.id）；
const isNewTodo=typeof oldValue==‘未定义’；
如果（isNewTodo）{
this.setState（{addedId:todo.id}）；
}
});
}
handleRemove（id）{
this.props.onItemRemove（id）；
}
render（）{
返回(

{
this.props.todos.map（todoItem=>(
))
}

);
}
}
TodoList.propTypes=todolistrops；
将默认值导出到列表；

我的contanier看起来是这样的

从“React”导入React；
从“./components/TodoInput”导入TodoInput；
从“./components/TodoList”导入TodoList；
从“../../../utils/todo”导入{getAll，add，remove}；
导入“/TodoContainer.css”；
类TodoContainer扩展了React.Component{
构造函数（）{
超级（）；
此.state={
待办事项：[]，
};
this.handleRemove=this.handleRemove.bind（this）；
this.handleAdd=this.handleAdd.bind（this）；
}
componentDidMount（）{
getAll（）。然后（（todos）=>{
this.setState（{todos}）；
});
}
（价值、头衔）{
添加（值、标题）。然后（（id）=>{
这是我的国家({
todos:this.state.todos.concat([{
身份证件
价值
标题
}]),
});
});
}
handleRemove（id）{
删除（id）。然后（（）=>{
这是我的国家({
todos:this.state.todos.filter（todoItem=>todoItem.id！==id），
});
});
}
render（）{
返回(
);
}
}
将默认值导出到容器；

问题在于，在

TodoInput

中，您尝试对两个实例使用一个变量

input

。以下是

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>
  );
};

const TodoInput=（道具）=>{
让InputItle，inputValue；
常量handleClick=（）=>{
props.onAdd（inputTitle.value，inputValue.value）；
inputTitle.value=''；
inputValue.value=''；
input.focus（）；
};
返回(
{INPUTTILE=currentElement；}}
占位符=“标题”
/>
{inputValue=currentElement；}}
占位符=“值”
/>
添加项
);
};
谢谢您的回答，它只在前端工作，但在我的本地存储后端服务中，它不具有保存倾斜值和id@user8054244我想最好是提出一个新问题，没有了
输入
错误，你的新问题也解决了。它的代码是一样的，但我使用的是连接到本地存储的Axios，我在Axios中的代码看起来像'const add=（title，value）=>Axios（{method:'POST'，url:
${SERVICE_url}/v1/items
，data:{title，value}，}），然后是（validateStatus（201）），然后是（response=>response.data.id）；'
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;

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;

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;

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>
  );
};