Почему setState не меняет состояние?

Question

[Артем Владиленко]

Здравствуйте. Можете исправить меня? У меня setState не меняет состояние(city), почему?
Возможно я допустил ошибку из-за невнимательности или из-за нехватка знаний:))))

function App(props) {

	let state = {
		city: "Piter"
	}

	const gettingWeather = async (e) => {
		e.preventDefault();
		let city = e.target.elements.city.value;
		const api_url = await
		fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`);
		const date = await api_url.json();
		console.log(date)

		const handleClick = () => {
			this.setState({
				city: "Moscow"
			})
		}
		console.log(state.city)
	};

	return(
		<>
			<Info />
			 <Form weatherMethod={gettingWeather} />
			<Weather city={state.city} />
		</>
	)
}

Comments

[Михаил]

у функциональных компонентов есть setState ?

[Артем Владиленко]

Михаил, извини а не можешь подсказать что использовать там вместо setState:):):):):):):):):):):):):):):)))

[Михаил]

Артем Владиленко, useState

[Артем Владиленко]

Михаил, Спасибо)

Answer 1

[Мышб]

Весь твой код в принципе неправильный. Я, конечно, не знаю, что за компонент Form, но предполагаю, что там тоже будут ошибки. Возможно ты gettingWeather передаешь в onSubmit и там получаешь данные погоды, которые в итоге все равно никуда не идут - потому что код не дописан, но ок, вопрос вообще не про это.

State в React-компоненте это не просто переменная, которую можно создать с помощью const или let. Есть два варианта создания компонента и хранение стейта - это классовый и функциональные подходы:

1) Class

class App extends React.Component {
  // на самом деле тоже старый подход
  constructor() {
    this.state = { city: "Какой-то город" }
  }
  // babel из "коробки" давно уже поддерживает такой вариант
  state = { city: "Какой-то город" }
}

2) Functional

const App = () => {
  const [state, setState] = React.useState('Какой-то город')
}

Чтобы поменять значение стейт надо вызвать функцию в которой ты меняешь стейт. То есть в твоем случае handleClick должен находить в блоке App, а не gettingWeather и вызываться например при клике на кнопку где-то

<button onClick={handleClick}>Set new state</button>

P.S. А, ну и у App в this нет setState, который ты вызываешь из handleClick. Короче ты смешал все виды взаимодействия с состоянием в одной функции. Советую почитать сначала туториал реакта на оф сайте, а потом что-то делать методом тыка.

Answer 2

[Алексей Муравьёв]

Дело в том, что ты setState засунул в функцию, которую не вызываешь.
Лучше посмотри хуки. С ними гораздо проще, чем с классами разбираться