React新手求助：为何在render外无法获取data值？

嘿，这是个React新手常遇到的问题，别慌，我来给你捋清楚原因和解决办法～

为什么会出现这个问题？ #

核心原因是作用域的差异：

• 你用内联箭头函数() => { console.log(data) }的时候，这个函数是在data.map的循环内部创建的，它会“捕获”当前循环迭代的那一个data（也就是当前遍历到的数组项），所以点击按钮时能正确打印出对应的内容。
• 但当你把逻辑抽离成组件类里的handleClick方法时，这个方法的作用域是整个组件，它里面的data根本不是循环里的那个每一项的data——要么是组件的某个同名state/props（如果有的话），要么就是未定义的，自然打印不出你想要的值。

解决办法有这几种，你可以根据场景选： #

1. 给handleClick传参（最常用）

把handleClick改成接受参数的函数，在调用的时候把当前循环的data项传进去：

// 组件类内部定义方法
handleClick = (itemData) => {
  console.log(itemData); // 这里就能拿到当前点击项的data了
}

// 在render的map循环里调用
render() {
  return (
    <div>
      {this.state.data.map(item => (
        <button key={item.id} onClick={() => this.handleClick(item)}>点击查看</button>
      ))}
    </div>
  )
}

这种方式既保持了逻辑的抽离，又能让handleClick拿到当前项的data，大部分场景下都适用。

2. 使用bind绑定参数

如果你不想用内联箭头函数，也可以用bind来给handleClick绑定当前项的data：

handleClick = (itemData) => {
  console.log(itemData);
}

render() {
  return (
    <div>
      {this.state.data.map(item => (
        <button key={item.id} onClick={this.handleClick.bind(this, item)}>点击查看</button>
      ))}
    </div>
  )
}

不过要注意，bind每次render都会返回一个新函数，和内联箭头函数类似，除非是处理非常大规模的列表，否则性能影响可以忽略。

3. 拆分成子组件（适合复杂场景）

如果你的按钮还有更多逻辑，可以把它拆成独立的子组件，把当前项的data作为props传进去：

// 子组件
const ItemButton = ({ itemData, onItemClick }) => {
  const handleClick = () => {
    onItemClick(itemData);
  }
  return <button onClick={handleClick}>点击查看</button>
}

// 父组件里使用
class ParentComponent extends React.Component {
  handleClick = (itemData) => {
    console.log(itemData);
  }

  render() {
    return (
      <div>
        {this.state.data.map(item => (
          <ItemButton key={item.id} itemData={item} onItemClick={this.handleClick} />
        ))}
      </div>
    )
  }
}

这种方式能让代码更清晰，也避免了父组件render时重复创建函数的问题。

内容的提问来源于stack exchange，提问作者Md Nahid Hasan