Javascript react和“react”的问题；这"；即使在装订之后

[UPDATE]如果我转到ListItem.js并在控制台中记录this.props（有或没有将props传递给构造函数），我可以看到除方法之外的所有props。我还刚刚在ListItem.js上删除了整个onchange事件的情况下运行了代码，但仍然得到了未定义的错误。因此，我认为错误来自HomeDepo.js页面，而不是ListItem.js。谢谢大家迄今为止的建议

我是一个新的反应者，我确信这将是一个基本的错误，我无法克服

我有一个父组件，它调用子组件的实例，通过一个prop从父组件传递一个方法

为了使事情稍微复杂一点，父组件从一个单独的数据文件获取其状态数据，我只想调用状态数组中对象子集上的子组件

以下是我得到的：

listData.js：

    const listData = [
    {
        id: 1,
        store: "SaveOnFoods",
        itemText: "bread",
        purchased: false
    },
    {
        id: 2,
        store: "SaveOnFoods",
        itemText: "milk",
        purchased: false
    },
    {
        id: 3,
        store: "HomeDepo",
        itemText: "nails",
        purchased: true
    },
    {
        id: 4,
        store: "HomeDepo",
        itemText: "wood",
        purchased: false
    }
    ]

export default listData;

HomeDepo.js：

    import React from "react";

import listData from "../../../listData";
import ListItem from "../../ListItem";

import AddListItem from "../../AddListItem";

const storeStyles = {
    width: "90%",
    border: "1px solid black",
    boxShadow: "5px 10px 8px #888888",
    padding: "10px",
    margin: "20px"
}

const listStyles = {
    listStyle: "none",
}

class HomeDepo extends React.Component {
    constructor(){
        super()
        this.state = {
            listData : listData
        }
        this.updateCheckbox = this.updateCheckbox.bind(this)
    }

    updateCheckbox(id){
        console.log("changed", id)
    }

    render() {
            /* make an array of components with associated props, where the item's store is HomeDepo */

            const listComponents = this.state.listData.map(function(item) {
                if (item.store == "HomeDepo") {
                   console.log(item);
                   return (
                        <ListItem id={item.id} key={item.id} itemText={item.itemText} purchased={item.purchased} updateCheckbox={this.updateCheckbox}/>
                    )
                }
                })

        return (
            <section style={storeStyles}>
                <h3>Home Depo:</h3>
                <ul style={listStyles}>
                    {listComponents}  {/* return the array */}
                </ul>
                <AddListItem />
            </section>
        )
    }

}

export default HomeDepo;

从“React”导入React；
从“../../../listData”导入listData；
从“../../ListItem”导入ListItem；
从“../../AddListItem”导入AddListItem；
常量存储样式={
宽度：“90%”，
边框：“1px纯黑”，
boxShadow：“5px10px 8px#88888”，
填充：“10px”，
保证金：“20px”
}
常量列表样式={
listStyle:“无”，
}
类HomeDepo扩展了React.Component{
构造函数（）{
超级（）
此.state={
listData:listData
}
this.updateCheckbox=this.updateCheckbox.bind（this）
}
updateCheckbox（id）{
console.log（“已更改”，id）
}
render（）{
/*制作一个带有相关道具的组件阵列，其中物品的存储是HomeDepo*/
const listComponents=this.state.listData.map（函数（项）{
如果（item.store==“HomeDepo”）{
控制台日志（项目）；
返回(
)
}
})
返回(
家庭仓库：

{listComponents}{/*返回数组*/}

)
}
}
导出默认HomeDepo；

ListItem.js：

import React from "react";

class ListItem extends React.Component {
    constructor(){
        super()
    }

    render() {
        return (
            <div>
                <input
                    type="checkbox" 
                    checked = {this.props.purchased}
                    onChange = {(event) => this.props.updateCheckbox(this.props.id)}
                    />
                <li>{this.props.itemText}</li>
            </div>
        )
        }
    }

export default ListItem;

从“React”导入React；
类ListItem扩展了React.Component{
构造函数（）{
超级（）
}
render（）{
返回(
this.props.updateCheckbox（this.props.id）}
/>
{this.props.itemText}
)
}
}
导出默认列表项；

通过prop传递的updateCheckbox方法应该在单击复选框时运行

但由于某些原因，我得到了未捕获的TypeError：无法读取未定义的属性'updateCheckbox'

---

我在这里遗漏了什么？

在您的列表项中，您没有将道具传递给超级用户

像这样：

constructor(props){
   super(props)
}

一旦更改输入，您就会调用

this.props.updateCheckbox

---

道具未定义。

您收到此错误是因为

此

未提及您认为它的功能

这里，

此

指的是封闭的匿名函数，非至

HomeDepo

：

const listComponents = this.state.listData.map(function(item) {
  if (item.store == "HomeDepo") {
    console.log(item);
    return (
      <ListItem id={item.id} key={item.id} itemText={item.itemText} purchased={item.purchased} updateCheckbox={this.updateCheckbox}/>
    )
  }
})

或者，更好的方法是，只需使用胖箭头函数（这些函数自动绑定）：

---

进一步阅读：

我认为您需要将

此

传递到您的地图中，否则它超出范围。看地图的最后一行，它关闭的地方，看看我在哪里添加了它。Map在函数后面接受第二个参数，您可以在其中传入

this

关键字

  const listComponents = this.state.listData.map(function(item) {
      if (item.store == "HomeDepo") {
        console.log(item);
        return (
          <ListItem
            id={item.id}
            key={item.id}
            itemText={item.itemText}
            purchased={item.purchased}
            updateCheckbox={this.updateCheckbox}
          />
        );
      }
    }, this);

const listComponents=this.state.listData.map（函数（项）{
如果（item.store==“HomeDepo”）{
控制台日志（项目）；
返回(
);
}
}，这个）；

试试看

但是，如果将映射中的函数（）更改为箭头函数，则不需要这样做

  const listComponents = this.state.listData.map((item) => {
      if (item.store == "HomeDepo") {
        console.log(item);
        return (
          <ListItem
            id={item.id}
            key={item.id}
            itemText={item.itemText}
            purchased={item.purchased}
            updateCheckbox={this.updateCheckbox}
          />
        );
      }
    });

const listComponents=this.state.listData.map（（项）=>{
如果（item.store==“HomeDepo”）{
控制台日志（项目）；
返回(
);
}
});

这不是解决方案，只是想让您知道，如果在定义类方法时使用ES6语法，则不必绑定到

此

。因此代码应该是这样的：

updateCheckbox=（id）=>{}

您可以尝试挂钩，这样就不必处理上下文issues@JossClassey谢谢你的提示，很高兴知道！嗨，C1rdec，谢谢你的建议。在尝试了上面的方法之后，我仍然得到相同的错误。此外，如果我转到ListItem.js并在控制台中记录this.props（有或没有将props传递给构造函数），我可以看到除方法之外的所有props。我还刚刚在ListItem.js上删除了整个onchange事件的情况下运行了代码，但仍然得到了未定义的错误。所以我认为错误来自HomeDepo.js页面，而不是ListItem.jscrescentfresh和@hugo Thank heaps，这两种解释都很有道理。这两种解决方案都非常有效。

  const listComponents = this.state.listData.map(function(item) {
      if (item.store == "HomeDepo") {
        console.log(item);
        return (
          <ListItem
            id={item.id}
            key={item.id}
            itemText={item.itemText}
            purchased={item.purchased}
            updateCheckbox={this.updateCheckbox}
          />
        );
      }
    }, this);

  const listComponents = this.state.listData.map((item) => {
      if (item.store == "HomeDepo") {
        console.log(item);
        return (
          <ListItem
            id={item.id}
            key={item.id}
            itemText={item.itemText}
            purchased={item.purchased}
            updateCheckbox={this.updateCheckbox}
          />
        );
      }
    });