升级到 React Native 26 后使用箭头函数时不再绑定

Posted 2023-03-08

【中文标题】升级到 React Native 26 后使用箭头函数时不再绑定

【英文标题】：This is no longer bound when using arrow functions after upgrading to React Native 26

【发布时间】：2016-09-23 19:01:06

【问题描述】：

在我的项目中，this 在。

如果我在下面的示例中不使用.babelrc，它可以与箭头函数一起使用。添加 .babelrc 时，箭头功能不再起作用。

.babelrc

"passPerPreset": true, "presets": [ "plugins":["../schema/babelRelayPlugin"], "react-native", ]

我也试过了：

"passPerPreset": true, "presets": [ "plugins":["../schema/babelRelayPlugin"], "react-native-stage-0", ] 和

"passPerPreset": true, "presets": [ "plugins":["../schema/babelRelayPlugin"], "react-native", "plugins":["transform-es2015-arrow-functions"], ]

---

这个错误

class NoArrow extends Component 
  constructor()
    super();
    this.state=x:0;
  

  inc = ()=>
    this.setState(x:this.state.x+1);
  
  render() 
    return (
      <View style=styles.container>
        <Text style=styles.welcome onPress=this.inc>
          Welcome to React Native! this.state.x
        </Text>

      </View>
    );
  

这行得通

class NoArrow extends Component 
  constructor()
    super();
    this.state=x:0;
    this.inc=this.inc.bind(this);
  

  inc()
    this.setState(x:this.state.x+1);
  
  render() 
    return (
      <View style=styles.container>
        <Text style=styles.welcome onPress=this.inc>
          Welcome to React Native! this.state.x
        </Text>

      </View>
    );
  

在添加/删除.babelrc时也运行：

watchman watch-del-all npm start --reset-cache 我还编辑文件（添加注释）以确保它重新编译。

---

旁注：有趣的是即使使用.babelrc 也可以使用

class NoArrow extends Component 
  constructor()
    super();
    this.state=x:0;
  

  render() 
    return (
      <View style=styles.container>
        <Text style=styles.welcome onPress=()=> this.setState(x:this.state.x+1)>
          Welcome to React Native! this.state.x
        </Text>

      </View>
    );
  

---

---

---

更新 1

在$TMPDIR里面删除缓存文件；它有一个散列名称，例如 11acb28f1c8d3c6313ca5f8ccba3c158

使用react-native-stage-0 可能已经修复了箭头函数问题，但现在 Relay.QL 不再正确编译。

  "passPerPreset": true,
  "presets": [
    "plugins":["../schema/babelRelayPlugin"],
    "react-native-stage-0"
  ]

【问题讨论】：

您有我们可以查看的示例 sn-p 代码吗？例如，您能否在babeljs.io/repl 上重现该问题？

已添加示例。我很确定我的 package.json 或 .babelrc 中的某些东西会导致问题。

添加 .babelrc 肯定是这个问题，但不知道解决方案是什么。

【参考方案1】：

我遇到过这个问题，但我很确定它早于 RN 0.24。你有什么版本的 babel-core/babel-cli？我一直希望T7191 能解决这个问题，但它没有。

我最终做的是使用babel-relay-plugin-loader。我不再使用 passPerPreset，它一直在可靠地工作，虽然我不完全理解如何。

这是我的 .babelrc 现在的样子：

"presets": [
    "react-native"
],
"plugins": [
    "babel-relay-plugin-loader"
],
"env": 
    "web": 
        "presets": ["es2015", "stage-0", "react"],
        "plugins": ["babel-relay-plugin-loader"]
    

【参考方案2】：

不确定这是否真的与 26 有关，我对 25 也有同样的问题。 在这里查看我的帖子： Broken autobinding in arrow function for referenced node modules when using react-native with react-relay

对我来说，这个问题并不持久，经过一段时间的修补后，它已经一去不复返了。似乎 react-native-stage-0 为我做到了。 清除缓存时，您唯一没有做的就是像这样清除 $TMPDIR：rm -rf $TMPDIR/react-*

我已尝试使用示例项目重现我的问题，但无法重现，我会尝试 rm -rf node_modules 以确保。

【讨论】：

谢谢！我是从RN24升级到RN26的，所以大概是在RN25中引入的。添加 react-native-stage-0 固定箭头功能，但来自中继。你能够让箭头功能和继电器一起工作吗？你能发布你的整个.babrc吗？

是的，它可以工作： "sourceMaps": "inline", "presets": [ "./plugins/babelRelayPlugin", "react-native-stage-0" ], "passPerPreset": true 这里是 babelRelayPlugin：const getBabelRelayPlugin = require('babel-relay-plugin') const schema = require('../../data/schema.json') module.exports = plugins: [getBabelRelayPlugin(schema.data, abortOnError: true )] ;