[英]React-native insert a value from render array to new array
我想要做的是从我渲染的旧数组中插入一个值到新数组中。
现在它可以完美地呈现我想要的数据,但是当我将它推入新数组时,它变成 [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>
);
}
}
您应该将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>
);
}
}
我做了一些改变,我现在运行没有错误,谢谢
您可以更改 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>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.