reactjs上带有和不带箭头功能的不同输出获取json

Posted 2023-02-22

【中文标题】reactjs上带有和不带箭头功能的不同输出获取json

【英文标题】：Different output fetching json with and without arrow function on reactjs

【发布时间】：2017-11-15 07:32:47

【问题描述】：

为什么我在获取 json 时得到不同的响应？当我使用箭头功能时它有效，当我不使用时它不起作用。

constructor(props)
  super(props);
  this.state = 
    data: [],
  ;
  this.url = 'https://fcctop100.herokuapp.com/api/fccusers/top/recent';

使用箭头函数获取：

fetch(url)
  .then((response) => 
    return response.json()
  ).then((json) => 
    this.setState(data: json);
    console.log('parsed json', json)
  ).catch((ex) => 
    console.log('parsing failed', ex)
  );

在控制台返回：

parsed json Array [ Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 90 more… ]

当我不使用箭头函数时，输出是不同的：

fetch(url)
  .then((response) => 
    return response.json()
  ).then(function(json) 
    this.setState(data: json);
    console.log('parsed json', json)
  ).catch((ex) => 
    console.log('parsing failed', ex)
  );

返回这个：

parsing failed TypeError: this is undefined Stack trace:
listCampers/<@http://localhost:3000/static/js/bundle.js:18177:17

【参考方案1】：

arrow function 没有自己的 this 并引用父级范围（在这种情况下它是 React 组件）。如果您使用function，您必须自己设置this，因为在这种情况下，this 指的是全局范围（在浏览器中它是window) 或者如果你使用 strict mode this 将是 undefined

.then(function(json) 
  this.setState(data: json);
  console.log('parsed json', json)
.bind(this))
 ^^^^^^^^^^^

【参考方案2】：

是的，因为在第二种情况下

fetch(url)
  .then((response) => 
    return response.json()
  ).then(function(json) 
    this.setState(data: json);    ///The error is given here 
    console.log('parsed json', json)
  ).catch((ex) => 
    console.log('parsing failed', ex)
  );

您正在使用 this.setState，但成功回调未绑定到 React 组件上下文，因此 this 将引用 .then 函数本身的上下文，因此 setState 将不可用

虽然在第一种情况下，this 内部箭头函数是指父上下文，在您的情况下是 React 组件上下文 setState 在哪里可用，因此您会得到正确的输出