небольшая проблема в реакции родной | ActivityIndicator | компонент | реквизит внутри компонента | реквизит | SetState - PullRequest
Новая
       32

небольшая проблема в реакции родной | ActivityIndicator | компонент | реквизит внутри компонента | реквизит | SetState

1 голос
/ 17 июня 2019

так что моя проблема в том, что мне нужно установить состояние внутри функции / компонента.состояние "isLoading" по умолчанию установлено на true (это для ActivityIndicator), и мне нужно изменить его обратно на false внутри компонента, чтобы индикатор перестает работать, и компонент отображает результаты.

вот код: 

const Data = require('../data/my_data.json');

export default class Albums extends React.Component {

constructor(props) {
    super(props);
    this.state = {
      Data_list : Data,
      isLoading: true,
    };

componentWillMount() {
    return this.state.Data_list.map(something=> (
      <list_Detail key={something.id} something={something} />
    ));
  }

render() {
    if(this.state.isLoading){
       return(
        <View style={{flex: 1, padding: 20}}>
           <ActivityIndicator/>
        </View>
       )
    }
return (
    <ScrollView>{this.componentWillMount()}</ScrollView>

    )}
}

я уже пробовал это: 

componentWillMount() {
    return this.state.Data_list.map(something=> (
      <list_Detail key={something.id} something={something} />
    ))
    .then(this.setState({isLoading: false}));
  }

но это не сработало

ТАК ЛЮБЫЕ ИДЕИ !!!! ????

1 Ответ

0 голосов
/ 17 июня 2019

componentWillMount - метод жизненного цикла, который вызывается непосредственно перед визуализацией компонента.Вы не можете вернуть интерфейс из этого метода

Переместить часть интерфейса в метод render и оставить только вызов API в componentWillMount.

componentWillMount() {
    axios.get('https://api.jsonbin.io/b/5d05c8712132b7426d0')
    .then(response => this.setState({Data: response.data, isLoading: false}));
    )); 
}

В методе render, 

render(){
  return (
  //other UI
  {this.state.Data.map(something => (
          <list_Detail key={something.id} something={something} />
         />
  ))}
}

Найти использование для componentWillMount и других методов жизненного цикла здесь

...