React setState 两次呈现状态

Question

When I trade with setState, it turns twice. First the Data Fail is returned and then the Data Ready is returned. Console return false first then true. I just want to return true in the console.

export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            data: []
        };
    }
    componentDidMount() {
        fetch("https://reqres.in/api/users?page=2")
            .then(res => res.json())
            .then(result => {
                this.setState({
                    data: result.data,
                    loading: true
                });
            });
    }
    render() {
        const { loading } = this.state;
        console.log(loading);
        const dataReady = <div>Data Ready </div>;

        const DataFail = <div>Data Fail </div>;
        return <div>{loading === true ? dataReady : DataFail}</div>;
    }
}

Example: https://codesandbox.io/s/kopz8wrl7o

Answer 1

It is due to the React's lifecycle and the fact that you are setting the state.loading property initially to false. https://reactjs.org/docs/react-component.html

First there is the initial render, then the componentDidMount with its setState is called. You might want to leave the loading undefined and then in the render method check if its defined or not before checking its value.

Answer 2

You simply reversed the boolean associated with the loading. You should initially set it to true and then to false when your data is loaded.

Working example :

 class App extends React.Component { constructor(props) { super(props); this.state = { loading: true, error: false, data: [] }; } componentDidMount() { fetch("https://reqres.in/api/users?page=2") .then(res => res.json()) .then(result => { this.setState({ data: result.data, loading: false }); }) .catch(error =>{ this.setState({ error: true }); }); } render() { const { loading, error } = this.state; !loading && console.log(true) return <div>{!loading && <div>Data Ready </div>} {error && <div>Data Error :( </div>} </div>; } } ReactDOM.render(<App/>, document.getElementById('root'))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/umd/react-dom.production.min.js"></script> <div id='root'/>

Answer 3

your data changes that's why you have two messages:

you need did decision, what's you gonna do? if you didn't want change state you can use shouldComponentUpdate , or you can just skip 1 console message