React setState дважды отображает состояние
Когда я торгую с setState, он поворачивается дважды. Сначала возвращается ошибка данных, а затем - данные готовы. Консоль сначала возвращает false, затем 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.info(loading);
const dataReady = <div>Data Ready </div>;
const DataFail = <div>Data Fail </div>;
return <div>{loading === true ? dataReady : DataFail}</div>;
}
}
да только верните истину.
Вы имеете в виду это? codeandbox.io/s/rj8po7jzrq
Вы не можете просто вернуть true в консоли. Поскольку начальное состояние ложно для загрузки. Так что это будет отображаться в консоли перед начальным рендерингом. После этого это изменится на true.
Вы должны изучить функцию жизненного цикла shouldComponentUpdate ()
@EponymeWeb Я не вижу смысла использовать это
@EponymeWeb Я пробовал использовать shouldComponentUpdate, но не смог. Не могли бы вы показать мне образец?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Это связано с жизненным циклом React и тем фактом, что вы изначально устанавливаете для свойства state.loading значение false. https://reactjs.org/docs/react-component.html
Сначала выполняется начальный рендеринг, затем вызывается componentDidMount с его setState. Возможно, вы захотите оставить загрузку неопределенной, а затем в методе рендеринга проверьте, определено ли оно или нет, прежде чем проверять его значение.
Вы просто изменили логическое значение, связанное с загрузкой. Вы должны сначала установить его на 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.info(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'/>Думаю, я не мог точно объяснить вопрос. Я просто хочу вернуть true на консоли, мое начальное значение будет false.
Вы хотите вернуть истину только тогда, когда ваши данные загружены?
Вот и все, теперь ваш компонент регистрирует true при загрузке данных.
Мне нужно выполнить консольный процесс при рендеринге.
Хорошо, я понятия не имею, что это необходимо, но держите. Условием для рендеринга всего, что уже загружено, является просто !loading.
при перезагрузке страницы появляется сообщение об ошибке данных, затем появляется сообщение о готовности данных. когда вы перезагружаете страницу, я просто хочу вернуть готовые данные.
Вы должны были сказать это раньше, вот и все, теперь все исправлено
ваши данные меняются, поэтому у вас есть два сообщения:
Вам нужно принять решение, что вы собираетесь делать?
если вы не хотите изменять состояние, вы можете использовать shouldComponentUpdate, или вы можете просто пропустить 1 консольное сообщение
Как я могу использовать shouldComponentUpdate без использования componentDidMount?
вы можете оставить componentDidMount и просто добавить shouldComponentUpdate
Что вы имеете в виду, говоря, что хотите вернуть только истину?