Question

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

我是React的新手，我确信这将是我无法逾越的非常基本的错误。

我有一个父组件，该组件调用子组件的实例，并通过道具从父类传递方法（除其他外）。

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

这就是我所拥有的：

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;

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;

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

但是由于某种原因，我遇到了Uncaught TypeError：无法读取未定义的属性'updateCheckbox'

我在这里想念什么？

Answer 1

在您的 ListItem 中，您不会将道具传递给超级对象。

像这样：

constructor(props){
   super(props)
}

然后您在输入的onChange上调用this.props.updateCheckbox。

道具未定义。

Answer 2

您收到此错误，是因为this并未提及您认为的错误！

在这里，this指的是封闭的匿名函数，对于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}/>
    )
  }
})

当然，此函数本身没有属性updateCheckbox，因此会出错。您需要绑定此（指HomeDepo）到函数的此。

两种替代解决方案：

您可以«手动»进行操作：

const listComponents = this.state.listData.map(function(item) {
  /* ... */
}.bind(this))

或者更好的是，仅使用胖箭头功能 （自动绑定）：

const listComponents = this.state.listData.map(item => {
  /* ... */
})

进一步阅读：Understanding the "this" keyword in JS

Answer 3

我认为您需要将this传递到地图中，否则将超出范围。在地图的最后一行关闭它，看看我在哪里添加了它。 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);

尝试一下。

但是，如果您将地图内的function（）更改为箭头函数，则没有必要！

  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}
          />
        );
      }
    });

即使绑定后，react和“ this”问题仍然存在

3 个答案: