我下面的 React Js 代码有什么问题？

Question

import React from "react"
import Header from "./Header"
import ToDoItem from "./ToDoItem"
import toDoData from "./toDoData"

class App extends React.Component{
    constructor(props){
        super(props) 
        this.handleChange=this.handleChange.bind(this)
    }

    handleChange(id){
        console.log("Id value : ",id)
    }

    render(){
        const toDoTasks = toDoData.map(function (toDos){
            return <ToDoItem 
                        key={toDos.id}
                        handleChange={this.handleChange} // Line 26
                    />
        })

        return(
                <div className="rootComponent">
                    <Header />
                    {toDoTasks}
                </div>
        )
    }
}

export default App

错误

类型错误：这是未定义的

render/toDoTasks<

src/components/App.js:26

在我的代码中，我试图将我的 handleChange 函数附加到我的 <ToDoItem /> component.But 此处，我无法调用 handleChange function.If我在构造函数中定义了函数，然后我可以调用该函数，但我不希望我的函数在 constructor.How 中，我可以这样做吗？

Answer 1

问题在这里

 const toDoTasks = toDoData.map(function (toDos){
            return <ToDoItem 
                        key={toDos.id}
                        handleChange={this.handleChange} // Line 26
                    />
        })

function (toDos) 创建一个单独的范围，这不再指代您的 class 实例。

将其更改为

 const toDoTasks = toDoData.map(toDos => <ToDoItem key={toDos.id} handleChange={this.handleChange}/>);

将按预期工作，因为箭头函数保留父作用域而不创建自己的作用域。

我下面的 React Js 代码有什么问题？

What's wrong with my following react Js code?

javascript

this

reactjs