React-native 将渲染数组中的值插入到新数组中
Posted
技术标签:
【中文标题】React-native 将渲染数组中的值插入到新数组中【英文标题】：React-native insert a value from render array to new array 【发布时间】：2018-03-02 08:00:10 【问题描述】：我想要做的是从我渲染的旧数组中插入一个值到新数组中。
现在它可以完美呈现我想要的数据，但是当我将它推入新数组时，它变成 [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>
);
【问题讨论】：
您是否检查过ticketId 在ticketTemp 方法中是否有价值？
@JigarShah 是的，我已经检查过它有一个值
【参考方案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>
);
我做了一些更改，现在我运行没有错误，谢谢
【讨论】：
添加参数说明以便使用 @VahidBoreiri 我在ticketTemp 函数中遇到了新错误，您在渲染之外放置的那个错误说ticketId 未定义 我修正了我的答案。【参考方案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>
);
【讨论】：
我现在明白了......谢谢，......然后我可以将ticketTemp作为渲染之外的函数以上是关于React-native 将渲染数组中的值插入到新数组中的主要内容，如果未能解决你的问题，请参考以下文章
尝试基于 AsyncStorage React-Native 渲染组件时，对象作为反应子级无效