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

显示每次在渲染中更新onPress的数组 - ReactNative

1 个答案: