Блог

Главная - Вопросы по программированию - Ошибка типа: Не удается уничтожить свойство » имя «»props.todo», поскольку оно не определено. Реагировать

Ошибка типа: Не удается уничтожить свойство » имя «»props.todo», поскольку оно не определено. Реагировать

#reactjs

Вопрос:

Я создаю приложение для списка дел в React. Он правильно считывает поле ввода из состояния, но когда я добавил файл, который считывает всю информацию с входных данных и выводит ее в виде нового div с именем элемента задачи, он выдает ошибку — «Ошибка типа: не удается уничтожить свойство»имя «»реквизит.задача», поскольку оно не определено».

 import React, {useState} from 'react';
import './App.css';
import {Container, Row, Col} from 'react-bootstrap';
import AddForm from './components/AddForm';
import TodoList from './components/TodoList';



function App() {

  const  [todos, addTodos] = useState([]);

  const addTodoHandler = todo => addTodos([...todos, todo]);


  return (
  <Container fluid>
    <Row>
      <h1>Todo list</h1>
      <Col>
        <TodoList todos={todos} /> 
      </Col>
      <Col>
        <AddForm addTodoHandler={addTodoHandler}/>
      </Col>
    </Row>
  </Container>
  );
}

export default App; 
 import React from 'react';

const TodoList = (props) => {

    const {name} = props.todo;

    return (
        <div>
            <div>{name} </div>
            <button>Delete</button>
        </div>
    );
}

export default TodoList; 
 import React from "react";
import { Button } from "react-bootstrap";

class AddForm extends React.Component {

  state = {
    name: "",
  };

  add = (e) => {
    e.preventDefault();
    if (this.state.name === "") {
      alert("Todo cannot be empty");
      return;
    }

    this.props.addTodoHandler(this.state);
    alert(this.state.name)
    this.setState({ name: "" });
  };
render(){
  return (
    <div>
      <h2>Add Todo</h2>
      <form onSubmit={this.add}>
        <input
          type="text"
          name="todo"
          value={this.state.name}
          onChange={(e) => this.setState({ name: e.target.value })}
        />
        <Button type="submit">Add</Button>
      </form>
    </div>
  );
}
};

export default AddForm;

Комментарии:

1. const {name} = props.todo; не должно быть const {name} = props.todos; ?

2. да, спасибо. Теперь это работает

Ответ №1:

Как указано в комментариях, вам нужно исправить инструкцию деструктурирования, чтобы использовать правильный prop (todos вместо todo).

Но у вас есть дополнительная проблема в том, что ваш <TodoList> компонент не настроен для отображения списка. Вы передаете его todos как реквизит массива <TodoList> , но <TodoList> используете его как отдельный объект. Вам также нужно будет это исправить. Если вы хотите, чтобы список отображался, вам нужно будет повторить его. Что-то вроде этого:

 import React from 'react';

const TodoList = (props) => {

    const list = props.todos || [];

    return list.map(item => 
        <div>
            <div>{item.name} </div>
            <button>Delete</button>
        </div>
    );
}

export default TodoList;

Обратите внимание, что это также проверяет, что props.todos не определен, и если это так, присваивает списку пустой массив, чтобы визуализация имела значение и не завершалась сбоем.

Метки: ,