Как обновить состояние из другого компонента?
Я использую реагирующую нативную и реагирующую навигацию для маршрутизации.
Как обновить состояние с другого компонента/страницы?
Домашний экран
export class HomeScreen extends Component {
constructor(){
this.state = {
test: ''
}
}
updateState = ()=>{
this.setState({test:'new value'});
}
}
SideMenuScreen
import { HomeScreen } from "./home";
export class SideMenuScreen extends Component {
updateHomeState = ()=>{
let oHome = new HomeScreen();
oHome.updateState();
}
}
Мой App.js и конфигурация маршрутизации и бокового меню, как показано ниже:
import { createAppContainer, createDrawerNavigator } from "react-navigation";
import { SideMenuScreen } from "./screens/Sidemenu";
import { HomeScreen } from "./screens/Home";
export default class App extends Component {
render() {
return(
<AppContainer></AppContainer>
);
}
}
const AppNavigator = createDrawerNavigator(
{Home: HomeScreen,
other: otherpage},
{
contentComponent: SideMenuScreen
}
);
const AppContainer = createAppContainer(AppNavigator);
updateState выполняется, но не обновляет состояние.
Нет бокового меню в контентном компоненте
Итак, между двумя компонентами нет отношений родитель-потомок, верно?
можете ли вы проверить вопрос.
Ответы 4
If you have to update from the child component
Вам нужно будет передать Handlers от компонента, который содержит состояние, чтобы обновить значения, дочерний компонент может использовать эти обработчики для обновления состояние.
If you have to update from some other location
Вам нужно будет сделать уровень повышен состояние и следовать тому же, что и выше.
УровеньВверхКомпонент
export class App extends Component {
constructor(){
this.state = {
test: ''
}
}
updateState = (values)=>{
this.setState(values);
}
render(){
return <div>
<HomeScreen></HomeScreen>
<SideMenuScreen updateState = {this.updateState}></SideMenuScreen>
</div>
}
}
Спасибо, но нет отношения родитель-потомок
Я хочу изменить состояние из бокового меню.
Не тот ответ, который искал ОП, но абсолютно тот ответ, который я получил, поэтому +1. Спасибо!
Вы можете сделать это, используя ref.
HomeScreen
export class HomeScreen extends Component {
constructor(){
this.state = {
test: ''
}
}
updateState = ()=>{
this.setState({test:'new value'});
}
}
SideMenuScreen
import { HomeScreen } from "./home";
export class SideMenuScreen extends Component {
updateHomeState = ()=>{
this.homeScreen.updateState();
}
render(){
return(
<HomeScreen ref = {(ele) => this.homeScreen = ele}/>
);
}
}
когда вы переходите к следующему экрану, передайте эту функцию в параметрах,
this.props.navigate("SideMenuScreen",{update:this.updateState});
И на экране вашего бокового меню, назовите это с помощью реквизита,
this.props.navigation.state.params.update();//you can pass params also if needed
Я открываю боковое меню, например this.props.navigation.openDrawer()
Поскольку у вас нет отношения «родитель-потомок» между вашими компонентами... это можно сделать с помощью Редукционное действие
HomeScreen;
export class HomeScreen extends Component {
constructor() {
this.state = {
test: ""
};
}
componentWillReceiveProps(nextProps) {
const { test: nextTest } = nextProps;
const { test } = this.props;
if (nextTest !== test) {
this.setState({ test: nextTest });
}
}
}
const mapStateToProps = ({ yourReducerName: test }) => ({ test });
export connect(mapStateToProps)(HomeScreen);
import { HomeScreen } from "./home";
import { connect } from "tls";
class SideMenuScreen extends Component {
updateHomeState = () => {
const { updateHomeStateAction } = this.props;
updateHomeStateAction({ test: 'New Value' });
};
}
export default connect(null, { updateHomeStateAction })(SideMenuScreen);
@KhurshidAnsari Redux действительно подходит для решения такого рода проблем. redux.js.org/basics/basic-tutorial
Я много пробовал, но не могу найти решение. Теперь я собираюсь использовать избыточность, могу предложить простой пример избыточности.
@KhurshidAnsari redux - очень мощный инструмент... Я думаю, было бы здорово, если бы вы когда-нибудь инвестировали в его изучение... не только для имеющегося варианта использования, но и для многих вариантов использования, которые, как я полагаю, вы собирается встретиться лицом к лицу... Тем не менее, поначалу Redux довольно сложно понять... но как только вы освоитесь, его будет очень легко настроить и использовать... Бесплатные уроки: youtube.com/results?search_query=redux+учебник Для платных (которые я настоятельно рекомендую) ... Стив Грайдер в udemy udemy.com/user/sgslo
@KhurshidAnsari Желаем удачи!
Вы визуализируете SideMenuScreen внутри HomeScreen?