首页 > 解决方案 > React 本机组件不更新

问题描述

我对本机反应有一个我无法理解的问题,我可能有一个错误的方法。

所以我有这个组件,基本上是一个菜单,当我单击一个项目时,我调用了 handleClick。

class Header extends Component {
  //constructor and ecc....

  handleClick = (flow) => {
    navigate('Category', {catId: flow})   
  }

  render() { 
    return (
      <View>  
        {this.state.menu.map(menuSingle => (
          <View>
            <TouchableOpacity  onPress={() => this.handleClick(menuSingle.object_id)} >
              <Text>{menuSingle.title }</Text>
            </TouchableOpacity>
          </View>
        ))} 
      </View>
    );
  }  
}
export default Header;

然后在 Category.js 中,我从菜单中按 id 获取数据,但如果使用菜单表单 home.js 组件它正在工作,但是当我在 category.js 中使用它时,相同的菜单不会更新状态。

class Category extends Component{ 
  //constructor ecc... 

  componentDidMount(){
    return fetch("url="+parseInt(this.state.catId))
      .then((response) => response.json())
      .then((posts) => {
        this.setState({
          posts: posts,
          loading: false
        }, function(){
         });
      })
       .catch((error) =>{
        console.error(error);
       });
  }

  render() {  
    if(this.state.loading) {
      return (
        <Text> Loading...</Text>
      )
    }

    return (
      <SafeAreaView >
        <Header/>
        <ScrollView>
          {this.state.posts.map(post => (
            <View>
              <Text> {post.title} </Text>
            </View>  
          ))} 
        </ScrollView>
      </SafeAreaView>
    );
  }
}

export default Category;

有关如何从菜单组件中调用相同组件或更新类别状态的任何建议?谢谢

标签: javascriptajaxapireact-nativereact-native-navigation

解决方案


推荐阅读