Console.log в методе рендеринга показывает состояние = true, но jsx показывает false - PullRequest
Новая
       31

Console.log в методе рендеринга показывает состояние = true, но jsx показывает false

0 голосов
/ 25 марта 2019
  • У меня есть список элементов, которые я возвращаю из вызова API в componentDidMount.
  • У каждого элемента есть подсписок, который я хочу отображать условно, если по элементу щелкнули (как аккордеон).).

  • Чтобы добиться этого, в componentDidMount я устанавливаюState с объектом range_status с этой начальной формой: 

    key1: false,
key2: false,
...

  • Затем в функции обратного вызова я устанавливаювыбранный элемент имеет значение true, а ранее выбранный - значение false (для рендеринга в виде аккордеона).

  • Все это прекрасно работает в console.log, но JSX просто не обновляется в соответствии сзначения состояния, он просто поддерживает начальное значение, которое я дал состоянию в componentDidMount.

Вот мой код (суммированный только для того, чтобы подчеркнуть): 

class Hijos extends React.Component {

state = {
  ranges_status: {}
}

componentDidMount() {
    /* Here: API call and populate a ranges_status object with only 
    false values

    ranges_status: {
       'key1': false
       'key2': false
    }
    */

    /* set state */
    this.setState({ 
        ranges_status: ranges_status
    })
}


_handleOnPress = (clicked_key_range) => {

  /* Here I update the ranges_status object depending on which item was 
  clicked, so it can take a form like: 

  ranges_status: {
     'key1': true
     'key2': false
     'key3': false
  } */

  this.setState({ ranges_status: ranges_status })

}


render() {

const ranges_status = this.state.ranges_status

/* HERE I CONSOLE.LOG AND IT SHOWS IT EVERY TIME JUST HOW IT'S SUPPOSED 
TO BE, BUT THE JSX KEEPS SHOWING JUST THE INITIAL STATE VALUES (ALL 
FALSE) */

console.log("asdasdasd ", ranges_status)

return (
  <Container>
    <ViewsHeader title={'Hijos'} navigation={this.props.navigation} />
      <BasicHorseData/>
    <Content>
        <List
            dataArray={listHijosByRange}
            renderRow={(item) =>
              <ConditionalItem   key_range={item.key_range} is_active={this.state.ranges_status[item.key_range]} handle_on_press={this._handleOnPress} />
            }>
        </List>
    </Content>

     <ViewsFooter navigation={this.props.navigation} />

  </Container>
)
}
}


const ConditionalItem = (props) => {

   const is_active = props.is_active
   const key_range = props.key_range

   /* This shows false all the time */
   console.log(is_active)

   return(
     <ListItem
       button={true}
       onPress={() => props.handle_on_press(key_range)}
     >
       {/* THIS SHOWS FALSE ALL THE TIME TOO (here is where the 
       contional rendering is supposed to be) */}
       <Text>{is_active.toString()}</Text>
     </ListItem>
   )
}

Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 25 марта 2019

Я надеюсь, что компонент списка имеет форму NativeBase, если это так, пожалуйста, проверьте эту ссылку: https://github.com/GeekyAnts/NativeBase/issues/698

Возможно, проблема в том, что «Динамический список не обновляется при обновлении данных».разработчик из NativeBase рекомендует, используйте FlatList с ListItem.

и убедитесь, что вы добавили 

<FlatLsit
 extraData={this.state.ranges_status}  
 ...
/>

, это поможет обновить данные

0 голосов
/ 25 марта 2019

Я думаю, вам нужно изменить это внутри компонента ConditionalItem. 

const is_active = props.is_active

на это. 

let is_active = props.is_active

Ключевое слово const не позволяет переопределить значение внутри is_active.попробуйте изменить его, чтобы позволить ключевое слово.Надеюсь, что это работает!.

...