React setState 两次渲染状态

Question

当我用setState交易时，它转了两次。首先数据失败 returned，然后数据就绪 returned。控制台 return 先假后真。我只想在控制台中 return true。

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>;
    }
}

示例： https://codesandbox.io/s/kopz8wrl7o

Answer 1

这是由于 React 的生命周期以及您将 state.loading 属性最初设置为 false 的事实。 https://reactjs.org/docs/react-component.html

首先是初始渲染，然后调用 componentDidMount 及其 setState。您可能希望保留未定义的加载，然后在渲染方法中检查其是否已定义，然后再检查其值。

Answer 2

您只是反转了与加载关联的布尔值。您应该首先将其设置为 true，然后在加载数据时将其设置为 false。

工作示例：

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

您的数据发生变化，这就是您收到两条消息的原因：

你需要做决定，你打算做什么？如果你不想改变状态，你可以使用 shouldComponentUpdate，或者你可以跳过 1 条控制台消息

React setState 两次渲染状态

React setState twice renders state

javascript

fetch

reactjs

fetch-api