Question

我有一个列表，这些列表是我从componentDidMount中的API调用中带回的。
每个项目都有一个子列表，如果要单击该项目（作为手风琴），我想对其进行有条件的渲染。
要实现此目的，在componentDidMount中，我使用带有以下初始形式的range_status对象的setState：
```
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

我希望列表组件的格式为NativeBase，如果是，请检查此链接：https://github.com/GeekyAnts/NativeBase/issues/698

“数据刷新时动态列表不会刷新”可能是一个问题正如NativeBase的开发人员所称赞的，请将FlatList与ListItem一起使用。

并确保您添加

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

这将有助于更新数据

渲染方法中的Console.log显示state = true，但是jsx显示false

2 个答案: