Console.log 在 render 方法中显示 state = true，但 jsx 显示 false

Question

我有一个项目列表，是我从 componentDidMount 中的 API 调用带回来的。
每个项目都有一个子列表，如果单击该项目（作为手风琴），我想有条件地呈现它。
为了实现这一点，在 componentDidMount 中，我使用具有以下初始形式的 ranges_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>
   )
}

提前致谢！

Answer 1

我认为您需要在 ConditionalItem 组件中更改它。

const is_active = props.is_active

到此。

let is_active = props.is_active

const 关键字可防止您覆盖 is_active 中的值。尝试将其更改为 let 关键字。希望它有效！

Answer 2

我希望List组件是NativeBase形式，如果是这样，请检查这个link:https://github.com/GeekyAnts/NativeBase/issues/698

这可能是 "Dynamic List won't refresh when data refreshes " 的问题正如 NativeBase 的开发人员所推荐的那样，使用 FlatList 和 ListItem。

并确保添加

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

有助于更新数据

Console.log 在 render 方法中显示 state = true，但 jsx 显示 false

Console.log in render method shows state = true, but jsx shows false

lifecycle

jsx

react-native