Реакция setState дважды отображает состояние - PullRequest
0 голосов
/ 07 января 2019

Когда я торгую с setState, он поворачивается дважды. Сначала возвращается Data Fail, а затем возвращается Data Ready. Консоль сначала возвращает false, затем true. Я просто хочу вернуть 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

Ответы [ 3 ]

0 голосов
/ 07 января 2019

Вы просто отменили логическое значение, связанное с загрузкой. Сначала вы должны установить его на 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'/>
0 голосов
/ 07 января 2019

ваши данные изменяются, поэтому у вас есть два сообщения: enter image description here

тебе нужно было принять решение, что ты собираешься делать? если вы не хотите менять состояние, вы можете использовать shouldComponentUpdate, или вы можете просто пропустить 1 консольное сообщение

0 голосов
/ 07 января 2019

Это связано с жизненным циклом React и тем фактом, что для свойства state.loading изначально установлено значение false. https://reactjs.org/docs/react-component.html

Сначала идет начальный рендер, затем вызывается componentDidMount с его setState. Возможно, вы захотите оставить загрузку неопределенной, а затем в методе рендеринга проверить, определена ли она или нет, прежде чем проверять ее значение.

...