React-nativeレンダリング配列の値を新しい配列に挿入します

Question

私がしようとしているのは、新しい配列にレンダリングした古い配列の値を挿入することです。今では私は完全にしたいが、私は新しい配列にそれを押すと、それは[ID：未定義]になるデータをレンダリングすることができますについては

どのように私はmyState配列に保存するために、リストビューからレンダリングすることをticketIdを呼ぶのですか？

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

あなたはそれがmyState配列にこの値をプッシュすることができますticketTemp機能にtrackIdを渡す必要があります。私はちょうどそれをしました。そして、renderの内部には状態を変更する関数を入れることができないので、ticketTemp関数を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を変更してticketTempをticketIDで呼び出します。

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

}}