понимаю.. Вот мой пример, поле объекта контекста меняется, но ничего не перерендерится
import React, {useContext, useRef} from 'react'
// создаём контекст
const UserContext = React.createContext()
const userData = {
name: 'Vladimir',
changeName(newName) {
this.name = newName;
}
}
function App() {
return (
<div className={'app'}>
<UserContext.Provider value={userData}>
<ShowContextName/>
<ChangeContext/>
</UserContext.Provider>
</div>
);
}
// выводим имя из контекста
function ShowContextName() {
const context = useContext(UserContext)
return (
<div>
Name - {context.name}
</div>
)
}
// меняем поле имени объекта контекста
function ChangeContext() {
const context = useContext(UserContext)
const inputRef = useRef()
const changeContext = (e) => {
context.changeName(e.target.value)
}
return (
<div>
<input type="text" ref={inputRef} onChange={changeContext}/>
</div>
)
}
export default App;
сделал контектс стейтом App компонента и так работает, ну ок.. import React, {useContext, useRef, useState} from 'react' // создаём контекст const UserContext = React.createContext() function App() { const [name, setName] = useState('Vladimir') return ( <div className={'app'}> <UserContext.Provider value={{name, setName}}> <ShowContextName/> <ChangeContext/> </UserContext.Provider> </div> ); } // выводим имя из контекста function ShowContextName() { const context = useContext(UserContext) return ( <div> Name - {context.name} </div> ) } // меняем поле имени объекта контекста function ChangeContext() { const context = useContext(UserContext) const inputRef = useRef() const changeContext = (e) => { context.setName(e.target.value) } return ( <div> <input type="text" ref={inputRef} onChange={changeContext}/> </div> ) } export default App;
Всё правильно сделал
Обсуждают сегодня