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

来源

2017-05-26 Zhen

不要直接发生变异状态，调用'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

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

来源

2017-05-26 04:35:54

React Native JSX：设置状态导致应用程序崩溃

回答

相关问题