#javascript #reactjs #es6-promise
Вопрос:
Я создаю приложение для прогноза погоды, для отображения которого требуется 2 значения (имя и город). Вот почему я хочу, чтобы всплывающее окно появилось на сайте первым после загрузки. Затем, если пользователь вводит правильный город, вместо всплывающего окна появляется основной компонент. Я хотел использовать внешнюю библиотеку, такую как Sweetalert2, но она не допускает двойного ввода.
Я закодировал этот компонент, который использует выборку и условные обозначения, но он не работает. Если обещание успешно выполнено, оно должно изменить состояние «проверка», чтобы запустить рендеринг другого компонента, но когда присутствует «this.setState({ проверка: true})», обещание отправляет «сообщение об ошибке» вместо «успех», и больше ничего не происходит
import React from 'react'
import App from './App.js';
class InputBox extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "",
cityValue: "",
errorMessage: "",
key: 'x',
validation: false
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ cityValue: event.target.value })
}
handleSubmit(event) {
fetch('https://api.openweathermap.org/data/2.5/weather?q=' this.state.cityValue 'amp;appid=' this.state.key)
.then(function (resp) {
return resp.json()
})
.then(function (data) {
if (data) {
// this.setState({ validation: true }) // if this is present, there is "error message" in console
console.log("success")
}
})
.catch(function () {
console.log("error message")
});
}
render() {
let content
if (this.state.validation == false) {
content = <form
onSubmit={
(e) => {
e.preventDefault();
this.handleSubmit(this.state.cityValue);
}
}
>
<input type="text" value={this.state.cityValue} onChange={this.handleChange} />
<input type="submit" value="Send" />
</form>
} else {
content = <App city={this.state.cityValue} />
}
return (
<div>
{content}
</div>
);
}
}
export default InputBox
Ответ №1:
Вы можете использовать тернарный оператор(?:) для достижения условного рендеринга
render() {
return {this.state.validation == false?(
<form
onSubmit={
(e) => {
e.preventDefault();
this.handleSubmit(this.state.cityValue);
}
}
>
<input type="text" value={this.state.cityValue} onChange={this.handleChange} />
<input type="submit" value="Send" />
</form>):
(<App city={this.state.cityValue} />)
}}
Комментарии:
1. Я использовал ваш код, и он будет работать, но обещание все равно меняет состояние, даже если есть успешный ответ fetch()
2. Вы имеете в виду, даже если он получит ответ, и вы попытаетесь установить состояние его ошибки? или это просто не обновляет значение состояния ?
3. В идеале состояние должно обновляться до тех пор, пока API не выйдет из строя. просто вам нужно раскомментировать » / / this.setState({ проверка: true})», и в случае, если вы столкнулись с какой-либо ошибкой при обновлении, пожалуйста, поделитесь тем же
4. Я раскомментировал его, и он выдает «сообщение об ошибке». Когда я комментирую setState, он снова говорит «успех», и console.log(данные) работает.
5. эй, мне наконец-то удалось это исправить. Проблема заключалась в том, что это.setState не работало, если при разрешении обещания не было функции стрелки. В любом случае, спасибо вам за вашу помощь!
Ответ №2:
Используйте Условный Рендеринг.
Вы можете попробовать любой из приведенных ниже способов реализации условного рендеринга в react:
- Использование оператора if…else
- Использование оператора switch
- Использование Переменных Элементов
- Использование Троичных операторов
- Использование Логического amp;amp; (Оценка Короткого Замыкания)
- Использование Выражений Немедленно Вызываемых функций (IIFEs)
- Использование расширенных библиотек JSX
Обратитесь к условному рендерингу в документах react: https://reactjs.org/docs/conditional-rendering.html