Ошибки при использовании React
По мере того, как React набирает популярность, все больше разработчиков сталкиваются с разнообразными проблемами.
Изменение состояния прямым присваиванием значения
В React состояние не может напрямую быть назначено или изменено, иначе это вызовет проблемы, которые сложно исправить.
updateState = () => {
this.state.name = "Chris1993";
}
В консоли выведется предупреждение:
⚠️ Do not mutate state directly. Use setState().
✅ Решение:
// ClassComponent：используй setState()
this.setState({ name: "Chris1993" });
// FunctionComponent：используй useState()
const [name, setName] = useState("");
setName("Chris1993");
Привязка состояния напрямую к свойству value инпута
⚠️ Проблема:
Если напрямую привязать значение state как параметр к value инпута, то окажется, что чтобы мы не вводили в поле, его value не изменяется.
export default function App() {
const [count, setCount] = useState(0);
return <input type="text" value={count} />;
}
Это произошло потому что мы использовали переменную состояния как значение по умолчанию для параметра value, a value является динамическим значением. Но state в функциональных компонентах может быть изменен только через set метод, возвращаемый useState. Так что решение очень простое — используй set для изменения значения.
✅ Решение:
Используй onChange ивент и изменяй значение инпута с помощью setCount.
export default function App() {
const [count, setCount] = useState(0);
const change = (val) => setCount(val.value);
return <input type="text" value={count} onChange={change} />;
}
Забывать очищать побочные эффекты в useEffect
⚠️ Проблема:
В классовых компонентах мы используем метод componentWillUnmount() для очистки созданных ресурсов, например, идентификаторов таймеров и обработчиков событий.
✅ Решение:
В useEffect() для очистки ресурсов можно использовать возврат функции, что схоже с ролью метода componentWillUnmount()
useEffect(() => {
// Other Code
return () => clearInterval(id);
}, [name, age]);
👉 @seniorFront
