Reactjs - 為什么我不能設置 state？

Question

嗨，我正在嘗試從 jsonplaceholder 獲取用戶數據並使用該數據更新我的 state。 我可以毫無問題地獲取數據並將其記錄到控制台。 但是當我嘗試設置狀態時，我仍然得到一個空的 object。 我很感激任何幫助。 謝謝。

這是我的代碼：

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 並錯過了它是異步的事實。

Answer 1

來自setState的文檔

React 不保證立即應用 state 更改。

如果要使用最新數據，請使用回調參數（並將其用作 function，而不是賦值，因為它是方法，而不是屬性）

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

Answer 2

改變這個

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

進入這個

this.setState({ profileDetails: data });

把console.log(this.state.profileDetails); 內部渲染讓您看到您的新 state。

setState 是一個接收數據作為參數的 function。 但是你使用它就像 setState 是 json object

Answer 3

setState - 是一種方法。 請像這樣更改代碼 - this.setState({ profileDetails: data });

Answer 4

設置state的正確方法是這樣的，

this.setState({ profileDetails: data  })

您只能通過這種方式設置 state。

Answer 5

給出檢查數據是否可用的條件：-

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