javascript - react 问题和 "this"即使在绑定(bind)后

Question

[更新] 如果我转到 ListItem.js 并在控制台记录 this.props(有或没有将 props 传递给构造函数)，我可以看到除方法之外的所有 props。我还刚刚运行了删除了 ListItem.js 上的整个 onchange 事件的代码，但我仍然遇到未定义的错误。所以我认为错误来自 HomeDepo.js 页面而不是 ListItem.js。感谢大家到目前为止的建议!

我是 React 的新手，我遇到了一个我无法克服的非常基本的错误。

我有一个调用子组件实例的父组件，通过 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;

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: Cannot read property 'updateCheckbox' of undefined

我在这里错过了什么？

Answer 1

您收到此错误是因为 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，因此会出现错误。您需要将 outer this(指 HomeDepo)绑定(bind)到函数的inner this。

两种替代方案:

1. 您可以“手动”完成:

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

2. 或者，更好的是，简单地使用一个胖箭头函数 (那些自动绑定(bind)到 this):

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

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