javascript - 显示每次在渲染时更新 onPress 的数组 - React Native

Question

我有 2 个类，在一个类中，按下 TouchableOpacity 后，我将一些 id 添加到数组中。

第一类 - (AddToCard)

<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)}

Answer 1

1)第一个问题是:

this.state.selectedMembers.push(id)

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

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

构建新数组并将其存储在 newArray 变量中。 然后通过 setState 改变你的状态。

2)当我理解你的意思时，你只想显示新添加的 ID，对吗？

您可以分离这些数据并提供您已经获得的 id 作为属性 members={[/* 成员(member) ID*/]}

然后渲染所有内容:

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>
    );
}