代码之家 › 专栏 › 技术社区 › CraZyDroiD

显示每次在render-reactnative中按时更新的数组

react-native reactjs javascript

CraZyDroiD · 技术社区 · 7 年前

我有两节课,在一节课上按 TouchableOpacity 我在数组中添加一些id。

一级-(地址卡)

<TouchableOpacity style={styles.addtogroupcard} onPress={() => addToArray(reviewer.id)}>
  <Icon name="ios-add-circle-outline" style={styles.friendaddicon}/>
</TouchableOpacity>

第二类

class AddMem extends Component {

    constructor(props) {
        super(props);
        this.state = {

            selectedMembers: []

        }
    }


    addToArray(id) {

        this.state.selectedMembers.push(id)
        console.log("selectedMembers", this.state.selectedMembers);

    }

    render() {

         return (

            <View style={{flex: 1, backgroundColor: 'whitesmoke', padding: 10}}>

                  <AddToCard reviewer={reviewer} key={reviewer.id} addToArray={this.addToArray.bind(this)}/>
             ////this is where i want to display my array data



            </View>
        );
    }
}

如何可以显示这些数组数据,而不必再次更新数组,而只显示添加到数组中的新数据。

我的方法是这样的,但它不起作用。

{this.state.selectedMembers.map(selectedMember => selectedMember)}

1 回复 | 直到 7 年前

christian wuensche 7 年前

1)第一个问题是:

this.state.selectedMembers.push(id)

不要直接改变状态。用途:

const newArray = [ ...this.state.selectedMembers, id ];
this.setState({ selectedMembers: newArray });

构建新数组并将其存储在new array变量中。然后通过 setState .

2)当我明白你说得对时,你只想显示新添加的ID,对吧?

你可以把这些数据分开,把你已经拿到的身份证给我 members={[ /* member ids*/ ]}

然后渲染所有内容:

render() {

     return (

        <View style={{flex: 1, backgroundColor: 'whitesmoke', padding: 10}}>

              <AddToCard reviewer={reviewer} key={reviewer.id} addToArray={this.addToArray.bind(this)}/>
              {
                  this.props.members.map(id => (
                      <Text key={id}>{id}</Text>
                  ))
              }
              {
                  this.state.selectedMembers.map(id => (
                      <Text key={id}>{id}</Text>
                  ))
              }



        </View>
    );
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

7 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

7 月前

Alex · 在轻量级中同时解构和不解构变量

7 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

7 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

7 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

7 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

7 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

7 月前

user3472810 · Angular@Output/EventEmitter返回undefined

7 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

7 月前