Как использовать setState для импортированной части RN - PullRequest
Новая
       16

Как использовать setState для импортированной части RN

1 голос
/ 12 апреля 2019

Я не могу изменить состояние импортированной части RN.

Я пытаюсь: 

this.setState({myState: "This does not do anything"})

Но это не работает.Я подозреваю, что проблема заключается в следующем - ссылаясь только на основной документ.Но я не знаю, как это изменить.

Интересно, 

state = {myState: 'Now it is changed'}
this.setState({})

это работает.Но из того, что я прочитал здесь, не рекомендуется.

Спасибо! 

// MAIN FILE

import React, {Component} from 'react';
import {Button, View } from 'react-native';
import { TestImport } from './TestImport';

type Props = {};
export default class App extends Component<Props> {

  _onPressChange = () => {
  state = {myState: 'Now it is changed'}
  this.setState({})
  // the above commented piece works - strangely enough

  this.setState({myState: "This does not do anything"})
  // this does not work 

}

  constructor (props) {
 super(props)
this.state = {
    myState: 'to this'
}
}

  render() {

    return (
      <View>
     <View>
     <TestImport></TestImport>    
     </View>
    <View>
    <Button title="Click to change" onPress={() => this._onPressChange()}/>
    </View>
    </View>

    );
}
}


// IMPORTED FILE
import React from 'react';
import {View, Text, StyleSheet } from 'react-native';

this.state = {
    myState: 'Change this'
}

const TestImport = (props) => {

   return (
        <View>
        <Text>{this.state.myState} </Text>
    </View>

     )
}

export { TestImport };

Ответы [ 3 ]

0 голосов
/ 12 апреля 2019

import React, {Component} из'act '; import {Button, View} из'act-native '; импортировать TestImport из './TestImport';

Экспорт класса по умолчанию Приложение расширяет Компонент {

constructor(props) {
    super(props)
    this.state = {
        myState: 'to this'
    }
}
_onPressChange = () => {
    this.setState({ myState: 'hello everyone do this' })

}


render() {
    //   console.log(this.state,'love')
    return (
        <View style={{ justifyContent: 'center', flex: 1, alignItems: 'center' }}>
            <View>
                <TestImport name={this.state.myState} />
            </View>
            <View>
                <Button title="Click to change" onPress={() => this._onPressChange()} />
            </View>
        </View>

    );
}

}

// app.js

импорт React из 'реакции'; import {View, Text, StyleSheet} из'act-native ';

this.state = { myState: «Изменить это» }

const TestImport = (props) => { console.log (props.name, 'props') вернуть ( {} Props.name 

)

} * * тысяча двадцать-один

экспорт по умолчанию TestImport; // importtest.js

0 голосов
/ 12 апреля 2019

Если у вас есть вариант использования, который вам нужно использовать state вместо props, как @ ответ Рави , вы можете сделать это следующим образом (отказ от ответственности: вам все еще нужны реквизиты: D)

class TestImport extends React.Component {
  state = {
    myState: 'Change this'
  }

  componentDidUpdate(prevProps) {
    const {changedState} = this.props;
    if(changedState && changedState !== prevProps.changedState)
      this.setState({myState: changedState})
  }
  ...
}

и у вашего родителя, 

<TestImport changedState={this.state.myState} />

Вам всегда нужно использовать props для «связи» между компонентами.Либо props, либо библиотека управления состоянием, например redux , либо MobX

0 голосов
/ 12 апреля 2019

Поток не такой.Ваш TestImport то есть импортированный компонент должен прочитать его из реквизита. 

// IMPORTED FILE
import React from 'react';
import {View, Text, StyleSheet } from 'react-native';

const TestImport = (props) => {

   return (
       <View>
            <Text>{props.title} </Text>
       </View>
   )
}

export { TestImport };

И передать его из вашего основного компонента 

<TestImport title={this.state.myState}></TestImport>

Так что, когда вы нажимаете на кнопку, он будет перерисовывать веськомпонент, который также включает в себя ваш TestImport и будет передавать последнее значение состояния myState через имя реквизита title

...