React Native JSX:设置状态导致应用程序崩溃
问题描述:
我正在使用反应原生来构建我的应用程序。以下是我用来显示“标签”列表的代码。所以代码被用来隐藏除第2个之外的所有标签,并且会出现“加载更多”链接。点击加载更多链接应该显示其余的标签。但是代码崩溃了。React Native JSX:设置状态导致应用程序崩溃
this.state = {
visibleCount: 2,
};
<TextLink onPress={() => {
this.setState({visibleCount: mealTags.length});
}}
</TextLink>
我正在使用更改状态来显示标签。任何人都可以告诉我出了什么问题,以及如何更新它?
export function MealTagsSection(props: MealTagsProps) {
let {mealTags} = props;
let loadMoreLink;
if (mealTags.length > 2) {
loadMoreLink = (
//THIS CAUSES THE APP TO CRASH
<TextLink onPress={() => {
this.setState({visibleCount: mealTags.length});
}}
>
load more...
</TextLink>
);
} else {
loadMoreLink = null;
}
this.state = {
visibleCount: 2,
};
return (
<View style={styles.mealTagsContainer}>
{
mealTags.slice(0, this.state.visibleCount).map((mealTag) => {
let tagStyle = '';
if (mealTag.category === 1) {
tagStyle = styles.tag_healthy;
} else {
tagStyle = styles.tag_improve;
}
return (
<View style={tagStyle}>
<Text style={styles.tagText}>{mealTag.description}</Text>
</View>
);
})
}
{loadMoreLink}
</View>
);
}
我得到的错误是这样的: ***终止应用程序由于未捕获的异常“RCTFatalException:未处理的异常JS:t.setState不是一个函数。 (在't.setState({visibleCount:n.length})','t.setState'未定义)',原因:'未处理的JS异常:t.setState不是函数。 (In't.setState({visi ...,stack:onPress @ 439:2034
答
你的MealTagsSection
是一个功能组件,React功能组件不一定包含本地状态,如果想要当地的一个状态,那么你应该让一个类成分
export class MealTagsSection extends Component {
constructor() {
super();
this.state = { visibleCount: 2 };
}
render() {
let { mealTags } = this.props;
let loadMoreLink;
if (mealTags.length > 2) {
loadMoreLink =
(
<TextLink
onPress={() => {
this.setState({ visibleCount: mealTags.length });
}}
>
load more...
</TextLink>
);
} else {
loadMoreLink = null;
}
return (
<View style={styles.mealTagsContainer}>
{mealTags.slice(0, this.state.visibleCount).map(mealTag => {
let tagStyle = "";
if (mealTag.category === 1) {
tagStyle = styles.tag_healthy;
} else {
tagStyle = styles.tag_improve;
}
return (
<View style={tagStyle}>
<Text style={styles.tagText}>{mealTag.description}</Text>
</View>
);
})}
{loadMoreLink}
</View>
);
}
}
不要直接发生变异状态,调用'this.setState' – Li357
感谢@AndrewLi,改变我收到此错误后:2017年5月26日11 :30:24.419实现[31978:2275669] ***终止应用程序,由于未捕获的异常'RCTFatalException:未处理的JS异常:t.setState不是函数(在't.setState({visibleCount:n.length})' ,'t.setState'未定义)',原因:'未处理的JS异常:t.setState不是函数。 't.setState({visi ...,stack: onPress @ 439:2034 – Zhen