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