React-native 将渲染数组中的值插入到新数组中

Question

我想要做的是从我渲染的旧数组中插入一个值到新数组中。

现在它可以完美呈现我想要的数据，但是当我将它推入新数组时，它变成 [id : undefined]

如何调用我从 ListView 渲染的 ticketId 保存到 myState 数组中？

 class SeactionSeating extends React.Component {

       state = { ticket: [], myState: [] };

       componentWillMount() {
         const tempticket = [];
          let i;
          let k = 1;
          let x;
          for (i = 1; i <= 50; i++) {
              k++;
              if (i < 10) {
                x = 'north';
              } else if (i < 20) {
                x = 'south';
              } else if (i < 30) {
                x = 'west';
              } else if (i < 40) {
                x = 'east';
              }
             tempticket.push({ ticketId: i, row: k, gate: x });
          }
          this.setState({ ticket: tempticket });
          this.setState({ myState: [] });
          //i deliberately leave mystate empty so that i can push new array later
       }
     render() {
     const ticketTemp = () => {
       this.state.myState.push({ id: ticketId });
       console.log(this.state.myState);
     };
    return (
      <Container>
        <View style={styles.listViewTitlePanel}>
           <Text> hello there</Text>
        </View>
          <Content>
            <ScrollView>
            <List>
              { this.state.ticket.map((item, i) => (
                <ListItem
                roundAvatar
                key={i}
                avatar={
                  <View >
                    <Text>{item.ticketId}</Text>
                  </View>
                }
                  title={
                    <View>
                      <Text>ROW :{item.row}</Text>
                    </View>
                  }
                  subtitle={
                    <View>
                      <Text>GATE :{item.gate}</Text>
                    </View>
                  }
                   //call ticketTemp
                   onPress={ticketTemp}
                />
              ))
              }
              </List>
            </ScrollView>
          </Content>
      </Container>
    );
  }
  }

Answer 1

您应该将trackId 传递给您的ticketTemp 函数，它可以将此值推送到myState 数组中。我就是这么做的。我将ticketTemp函数转移到render函数外部，因为修改状态的函数不能在render内部。 您的代码必须是这样的：

class SeactionSeating extends React.Component {
  state = { ticket: [], myState: [] };

  componentWillMount() {
    const tempticket = [];
    let i;
    let k = 1;
    let x;
    for (i = 1; i <= 50; i++) {
      k++;
      if (i < 10) {
        x = 'north';        
      } else if (i < 20) {
        x = 'south';
      } else if (i < 30) {
        x = 'west';        
      } else if (i < 40) {       
        x = 'east';
      }                          
        tempticket.push({ ticketId: i, row: k, gate: x });
      }
      this.setState({ ticket: tempticket });    
      // this.setState({ myState: [] }); //this line must be removed
      //i deliberately leave mystate empty so that i can push new array later
    }

    ticketTemp(ticketId) {
      this.state.myState.push({ id: ticketId });
      console.log(this.state.myState);
    };

    render() {

    return (
      <Container>
        <View style={styles.listViewTitlePanel}>
           <Text> hello there</Text>
        </View>
          <Content>
            <ScrollView>
            <List>
              { this.state.ticket.map((item, i) => (
                <ListItem
                roundAvatar
                key={i}
                avatar={
                  <View >
                    <Text>{item.ticketId}</Text>
                  </View>
                }
                  title={
                    <View>
                      <Text>ROW :{item.row}</Text>
                    </View>
                  }
                  subtitle={
                    <View>
                      <Text>GATE :{item.gate}</Text>
                    </View>
                  }
                   //call ticketTemp
                  onPress={() => this.ticketTemp(item.ticketId)}
                />
              ))
              }
              </List>
            </ScrollView>
          </Content>
      </Container>
    );
  }
}

我做了一些更改，现在我运行没有错误，谢谢

Answer 2

您可以更改ticketTemp 方法并将ticketID 作为参数传递。然后更改onPress并使用ticketID调用ticketTemp。

    class SeactionSeating extends React.Component {

       state = { ticket: [], myState: [] };

       componentWillMount() {
         const tempticket = [];
          let i;
          let k = 1;
          let x;
          for (i = 1; i <= 50; i++) {
              k++;
              if (i < 10) {
                x = 'north';
              } else if (i < 20) {
                x = 'south';
              } else if (i < 30) {
                x = 'west';
              } else if (i < 40) {
                x = 'east';
              }
             tempticket.push({ ticketId: i, row: k, gate: x });
          }
          this.setState({ ticket: tempticket });
          this.setState({ myState: [] });
          //i deliberately leave mystate empty so that i can push new array later
       }
     render() {
     const ticketTemp = (ticketId) => {
       this.state.myState.push({ id: ticketId });
       console.log(this.state.myState);
     };
    return (
      <Container>
        <View style={styles.listViewTitlePanel}>
           <Text> hello there</Text>
        </View>
          <Content>
            <ScrollView>
            <List>
              { this.state.ticket.map((item, i) => (
                <ListItem
                roundAvatar
                key={i}
                avatar={
                  <View >
                    <Text>{item.ticketId}</Text>
                  </View>
                }
                  title={
                    <View>
                      <Text>ROW :{item.row}</Text>
                    </View>
                  }
                  subtitle={
                    <View>
                      <Text>GATE :{item.gate}</Text>
                    </View>
                  }
                   //call ticketTemp
                   onPress={() => this.ticketTemp(item.ticketId)}
                />
              ))
              }
              </List>
            </ScrollView>
          </Content>
      </Container>
    );
  }
  }