React JS：this.setState和JSON.parse

Question

我有問題，我不知道該如何解決。 我對我的api發出了請求，它以這樣的對象響應：

{"_id":"5a806648300caf0072c7254a","mail":"email@email.com"}

我想將郵件打印到我的React組件中。 在我的“ componentDidMount（）”函數中，我收到了郵件，因此我的api沒有問題。 但是，當我想設置“用戶”變量的狀態時，無法在組件中打印該變量……它表示未定義。

這是我的代碼：

class UserList extends Component {
    constructor(props){
        super(props);
        this.state = {users:[]}
    }
    componentDidMount() {
        //here my function that store the response from my api
        GetData('http://localhost:3333/users', 'username=admin', 
        (res) => 
        {
            this.setState({users: JSON.parse(res)});
            //Here I can log the mail
            console.log(this.state.users[0].mail);
        })
    }
    render() {
        return (
            <table>
                <thead>
                <tr>
                    <th>EMAIL</th>
                </tr>
                </thead>
                <tbody>
                    <tr>
                        //Here it is 'undefined'
                        <td>{this.state.users[0].mail}</td>
                    </tr>
                </tbody>
            </table>
        );
    }
}

謝謝您的幫助 ！

Answer 1

您不應該直接使用異步操作中的值。

由於componentDidMount（）中的GetData是異步函數，因此將需要一些時間來獲取數據。 因此，在初始渲染中，處於狀態的user為空。

最好使用加載指示符，直到獲取數據並僅在接收到數據時才顯示數據。

您可以如下使用。

class UserList extends Component {
    constructor(props){
        super(props);
        this.state = {users:[]},
        loading: false
    }
    componentDidMount() {
        //here my function that store the response from my api
        this.setState({loading: true});
        GetData('http://localhost:3333/users', 'username=admin', 
        (res) => 
        {
            this.setState({users: JSON.parse(res), loading: false});
            //Here I can log the mail
            console.log(this.state.users[0].mail);
        })
    }
    render() {
        if(this.state.loading){
            return (<div> Loading... </div>)
        }
        return (
           <div>
            <table>
                <thead>
                <tr>
                    <th>EMAIL</th>
                </tr>
                </thead>
                <tbody>
                   {this.state.users.length > 0 &&
                    <tr>

                      <td>{this.state.users[0].mail || ''}</td>

                    </tr>
                   }
                </tbody>
            </table>
        </div>
        );
    }
}

使用可以使用地圖循環如下

               {this.state.users.length > 0 && this.state.users.map(user => 
               return(
                    <tr>

                      <td>{user.mail || ''}</td>

                    </tr>)
                   }

Answer 2

在上述情況下，問題在於了解React的組件生命周期。

請看一下參考 。

ComponentDidMount在渲染發生之后發生。

層次結構將是1.構造函數2. componentWillMount 3.渲染4. componentDidMount

如果通過用ComponentWillMount替換ComponentDidMount修改了代碼

componentWillMount() {
     //here my function that store the response from my api
        GetData('http://localhost:3333/users', 'username=admin', 
        (res) => 
        {
            this.setState({users: JSON.parse(res)});
            //Here I can log the mail
            console.log(this.state.users.mail);
        })
  }

如果api工作正常，它將提供數據。

但是請稍等，因為api的響應是一個對象，並且使用數組初始化狀態在概念上也是不正確的，我認為是正確的。

當我在Typescript中處理大多數項目時，狀態的初始化對我很重要。

constructor(props){
        super(props);
        this.state = {users:{
                         mail: ''
                      }}
}

個人喜好是檢查用戶狀態是否未定義，這肯定不允許您導致任何未定義或錯誤。

Answer 3

React安裝組件的生命周期為：

• 建設者
• componentWillMount
• 渲染
• componentDidMount

在此處查看更多信息： https : //reactjs.org/docs/react-component.html#mounting

安裝組件時，this.state.users是一個空數組。

您可以更改render方法：

 class UserList extends Component { constructor(props){ super(props); this.state = {users:[]} } componentDidMount() { //here my function that store the response from my api GetData('http://localhost:3333/users', 'username=admin', (res) => { // After setState react runs updating lifecycle methods (https://reactjs.org/docs/react-component.html#updating) this.setState({users: JSON.parse(res)}); //Here I can log the mail console.log(this.state.users[0].mail); }) } render() { // if users are not loaded, we return null from render function if (this.state.users.length === 0) { return null; } return ( <table> <thead> <tr> <th>EMAIL</th> </tr> </thead> <tbody> <tr> <td>{this.state.users[0].mail}</td> </tr> </tbody> </table> ); } }