Reactjs - 为啥我不能设置状态？

Posted 2023-02-22

【中文标题】Reactjs - 为啥我不能设置状态？

【英文标题】：Reactjs - Why can't i set state?Reactjs - 为什么我不能设置状态？

【发布时间】：2020-10-02 03:15:52

【问题描述】：

您好，我正在尝试从 jsonplaceholder 获取用户数据并使用该数据更新我的状态。我可以毫无问题地获取数据并将其记录到控制台。但是当我尝试 setState 时，我仍然得到一个空对象。 我很感激任何帮助。谢谢。

这是我的代码：

class ProfilePage extends React.Component 
  state = 
    profileDetails: ,
  ;

  componentDidMount() 
    this.fetchDetails();
  

  fetchDetails = async () => 
    const baseUrl = "https://jsonplaceholder.typicode.com";
    const pathname = this.props.history.location.pathname;
    const response = await fetch(`$baseUrl$pathname`);
    const data = await response.json();
    console.log(data);                 // I can see the data i want here in the console.

    this.setState =  profileDetails: data ;
    console.log(this.state.profileDetails);       // I get an empty object here.
  ;

  render() 
    return <h1>Name: this.state.profileDetails.name</h1>;
  


export default ProfilePage;

感谢大家花时间回答。显然我用错了 setState 并错过了它是异步的事实。

【问题讨论】：

看看setState的使用方式reactjs.org/docs/state-and-lifecycle.html

尝试新的钩子方式

【参考方案1】：

给出检查数据是否可用的条件：-

if(data)
this.setState = ( profileDetails: data );

【参考方案2】：

setState - 是一种方法。 请像这样更改代码 - this.setState( profileDetails: data );

【讨论】：

感谢您花时间回答。我试过了。仍然没有更新状态。

setState 是异步的

setState 不会立即更改状态。一旦默认情况下由于 setState 重新渲染发生，那么将能够看到您对状态对象所做的更改。

【参考方案3】：

来自setState的文档

React 不保证应用状态更改 马上。

如果要使用最新数据，请使用 callback 参数（并将其用作函数，而不是赋值，因为它是方法，而不是属性）

this.setState( profileDetails: data , () => 
  console.log(this.state.profileDetails)
)

【讨论】：

这解决了我的问题。非常感谢！

【参考方案4】：

设置状态的正确方法是这样，

this.setState( profileDetails: data  )

你只能通过这种方式设置状态。

【参考方案5】：

改变这个

this.setState =  profileDetails: data ;
console.log(this.state.profileDetails);

进入这个

this.setState( profileDetails: data );

将console.log(this.state.profileDetails); 放入渲染中，以便您查看新状态。

setState 是一个接收数据作为参数的函数。 但是你使用它就像 setState 是一个 json 对象

【讨论】：

欢迎您。此外，如果您控制台记录状态，请在渲染时执行。让您看到新的更新状态