Наши проекты:
Журнал · Discuz!ML · Wiki · DRKB · Помощь проекту |
||
ПРАВИЛА | FAQ | Помощь | Поиск | Участники | Календарь | Избранное | RSS |
[3.141.31.209] |
|
Сообщ.
#1
,
|
|
|
Ну вот пишу
import React, { useState } from 'react'; import { render } from 'react-dom'; const App = props => { const [text, setText] = useState(props.text); const handleTextChange = event => { setText(event.target.value); }; return ( <div> <input value={text} onChange={handleTextChange} /> </div> ); }; render(<App text="Hello" />, document.querySelector('#root')); render(<App text="World" />, document.querySelector('#root')); В итоге в броузе значение input по-прежнему "Hello"! |
Сообщ.
#2
,
|
|
|
Разобрался
Дело в том, что повторный вызов рендер того же компонента не удаляет предыдущий экземпляр компонента, а обновляет. Ну а поскольку обновление компонента происходить только при изменении состояния, а оно не изменилось, то и ничего не перерисовывается. Как же его обновить? Надо отследить получение нового свойства и изменить состояние. Изменение состояния приведет к перерисовке компонента. Для этого юзаем новый хук useEffect import React, { useState, useEffect } from 'react'; const App = props => { const [text, setText] = useState(props.text); const handleTextChange = event => { setText(event.target.value); }; useEffect(() => setText(props.text), [props.text]); return ( <div> <input value={text} onChange={handleTextChange} /> </div> ); }; Все терь чики-пуки |