ReactJS: невозможно прочитать свойство <issue>

Question

Проблема: при установке моего «завершенного» свойства на логическое значение в моем списке дел не будет проверено при использовании toDoData.map (item =>)

В моем ToDoData. js Я установил для свойства «complete» значение true или false. Всякий раз, когда я пытаюсь это сказать, «Невозможно прочитать свойство« завершено »из неопределенного». . Также, когда я пытаюсь отобразить свойство «текст», оно не принимает .item, , но только с props.item . Я пытался читать код снова и снова, но не могу найти решение своей проблемы.

Вот мой код:

import React from "react"


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

    )
}

export default Props

import React from "react";
import Props from "./props";
import ToDoData from "../ToDoData.js"

class ToDoapp extends React.Component{
constructor() {
  super()
  this.state = {
theanswer:ToDoData
     }

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

handleChange() {

}


render() {const ReturnToDo = ToDoData.map(item => <Props key={item.id} text={item.text} />)
  return ( <div> {ReturnToDo} 
  </div> 
    )
}
}

export default ToDoapp

const ToDoData = [

    { id: "1", 
    text: "Go and wash your clothes and grab some good food",
    completed: true

    },

    { id: "2", 
    text: "Go and wash your clothes and grab some good food",
     completed: true

    },

    { id: "3", 
    text: "Go and wash your clothes and grab some good food",
     completed: false

    },

    { id: "4", 
    text: "Go and wash your clothes and grab some good food",
    completed: false

    }   
]

export default ToDoData

Answer 1

Я вижу проблему. Здесь:

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

Вы пытаетесь получить доступ к props.item.completed , но на самом деле вы передаете в качестве реквизита фактический текст , поэтому это будет props.text . если вы посмотрите на функцию рендеринга внутри компонента Todoapp, у вас есть

render() {
  const ReturnToDo = ToDoData.map(item => <Props key={item.id} text={item.text}/>)

  return (<div>{ReturnToDo}</div> 
 )
}

Вы передаете <Props key={item.id} text={item.text}/>, что вам нужно сделать, это передать весь элемент как реквизит, такой как <Props key={item.id} item={item}/>, чтобы вы могли использовать его внутри Компонент реквизита, как вы пытаетесь сделать.

Посмотрите пример, который я сделал в codesanbox https://codesandbox.io/s/small-rain-4rhpv?fontsize=14&hidenavigation=1&theme=dark

Надеюсь, это поможет