Question

我在平面列表中显示的功能更多，但功能却更少，但是按下的状态无法按预期工作。当我设置状态值时，状态值组件未呈现。

我的构造函数设置如下

this.state = {
            accList: [],
            expanded: false,
            expandedText: "Show More"
        }

在componentdidmount（）中，我正在更新accList值的值，如下所示

componentDidMount = () => {
      this.setState({
accList:[{
    "customer_name": "Shubhangi J Thakur",
    "message":"Hello"
},
{
    "customer_name": "Arthur S Campbell",
    "message":"Hello_World"
},
{

    "customer_name": "Susan R Brill",
    "message":"hellow"
}]
});

    }

我已经在render（）中定义了平面列表，如下所示

<FlatList
     onScroll={this.handleScroll}
     data={this.state.accList}
       renderItem={this.renderItem}
        keyExtractor={this._keyExtractor}
    />

    renderItem = ({ item, index }) => (
        <Card style={style.cardLayout} key={index}>
            <CardItem header>

              <Text>{item.customer_name}</Text>

            </CardItem>
            {this.seemorefunctionality(item)}

        </Card>
    );


    seemorefunctionality = (item) => {

              return <View>

            {this.state.expanded ? this.expandedView(item) :null}
//To view Show More and Show Less Text
                <TouchableOpacity onPress={this.expandedText}>
                 <Text> {this.state.expandedText}</Text>
                </TouchableOpacity>
              </View>

            }
          } 



expandedText = () => {
        console.log('Setting the expanded text value', this.state.expanded)
         if (this.state.expanded) {
           this.setState({
             expandedText: "Show More"
           });
         }
         else {
           this.setState({
             expandedText: "Show Less"
           });
         }
         value=!this.state.expanded
         this.setState({
           expanded: value

         });
       }


expandedView = (item) => {
        return   <View>
             {item.map((obj, index) => {
               return (
                 <View key={index} >
                 <Text>{obj.message}</Text>
                 </View>
               )
             })}
           </View>

当我单击this.state.expandedText值时，在控制台中看到该值时会发生更改，但是当this.state.expanded设置为true时，它不会反映在视图中，而且还不会呈现expandView。 /> 在“查看”中，this.state.expandedText的值始终显示“显示更多”，而在控制台中，该值已更改为“显示更多”和“单击时显示更少”

Answer 1

要重新渲染平面列表，您必须添加 extraData = {this.state} ，如https://facebook.github.io/react-native/docs/flatlist

所述

状态更改时React-Native-Component不呈现

1 个答案: