javascript - 警告 : Failed prop type: The prop `todos[0].title` is marked as required in `TodoList` , 但其值为 `undefined`

Question

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

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

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;

我的待办事项

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;

Answer 1

问题在于，在 TodoInput 中，您尝试对两个 React 实例使用一个变量 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>
  );
};