Невозможно прочитать "идентификатор" неопределенного

Question

Я пытаюсь получить доступ к своему обработчику событий, у которого есть идентификатор параметра, но я получаю эту ошибку. Я пытался переписать код, но я получаю ту же ошибку. Я получаю, что я делаю что-то не так, когда я пытаюсь поднять идентификатор, но я не уверен.

import React from "react";

function Props(props) {
  return (
    <div>
      <h3>
        <input
          type="checkbox"
          checked={props.todoItem.completed}
          onChange={() => props.handleChange(props.item.id)}
        />
      </h3>
      <p> {props.todoItem.text} </p>
    </div>
  );
}

export default Props;

import React from "react";

import Props from "./props";
import ToDoData from "../ToDoData";

export default class App extends React.Component {
  constructor() {
    super();

    this.state = {
      todos: ToDoData
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(id) {
    console.log("changed", id);
  }

  render() {
    //Her henter du data, hvor du bruger mapping med map()
    const ReturnToDo = this.state.todos.map(item => (
      <Props key={item.id} todoItem={item} handleChange={this.handleChange} />
    ));
    return (
      <div>
        <h1>Hello</h1>
        {ReturnToDo}
      </div>
    );
  }
}

Answer 1

В событии onChange вы использовали неопределенный реквизит. Попробуйте это

import React from "react";

function Props(props) {
  return (
    <div>
      <h3>
        <input
          type="checkbox"
          checked={props.todoItem.completed}
          onChange={() => props.handleChange(props.todoItem.id)}
        />
      </h3>
      <p> {props.todoItem.text} </p>
    </div>
  );
}

export default Props;

Answer 2

Проблема в том, что вы передаете todoItem в Реквизит компонент и получаете доступ к item вместо todoItem.

Разрушенный путь

function Props({todoItem, handleChange}) {
  return (
    <div>
      <h3>
        <input
          type="checkbox"
          checked={todoItem.completed}
          onChange={() => handleChange(todoItem.id)}
        />
      </h3>
      <p> {todoItem.text} </p>
    </div>
  );
}

Answer 3

Вы должны изменить функцию Props на что-то вроде этого, поскольку вы передаете родительский элемент формы как опору todoItem для ребенка.

import React from "react";

function Props(props) {
  return (
    <div>
      <h3>
        <input
          type="checkbox"
          checked={props.todoItem.completed}
          onChange={() => props.handleChange(props.todoItem.id)}
        />
      </h3>
      <p> {props.todoItem.text} </p>
    </div>
  );
}

export default Props;

Answer 4

вы можете использовать вот так

import React from "react";

function Props(props) {
  return (
    <div>
      <h3>
        <input
          type="checkbox"
          checked={props.todoItem.completed}
          onChange={() => props.handleChange(props.key)}
        />
      </h3>
      <p> {props.todoItem.text} </p>
    </div>
  );
}

export default Props;

Answer 5

Ваш реквизит здесь tooItem, и вы получаете доступ к item в дочернем компоненте. <Props key={item.id} todoItem={item} handleChange={this.handleChange} />

<input
  type="checkbox"
  checked={props.todoItem.completed}
  onChange={() => props.handleChange(props.item.id)} // here there is no item in props, its todoItem
 />