React native React Native onPress文本对屏幕上的数据进行排序

有人能帮我把印刷文本上的数据分类吗

 <TouchableOpacity value='popularity' onPress={() => new MainActivity().sortby('popularity')}>
    <Text style={styles.text} >Sort by popularity</Text>
 </TouchableOpacity>

newmainActivity（）.sortby（'popularity'）}>
按受欢迎程度排序

当我按文本时，它会显示警告

无法对尚未安装的组件调用setState。这是一个no-op，但它可能表示应用程序中存在错误，可以直接分配给'This.state'或定义'state={}；'在MainActivity组件中使用所需状态初始化属性

文本在模型上

<Modal
              animationType={'slide'}
              transparent={false}
              visible={showModal}
              onRequestClose={() => {
                console.log('Modal has been closed.');
              }}>
              {/*All views of Modal*/}
              {/*Animation can be slide, slide, none*/}
              <View style={styles.modal}>
                <View style={{alignItems: 'flex-end',  }}>
                  <TouchableOpacity
                    style={{ justifyContent: 'flex-end', alignItems: 'flex-end' }}
                    onPress={() => {
                      setShowModal(!showModal);
                    }}
                  >
                    <Image
                      style={{ width: 25, height: 25, }}
                      source={require('./image/cancel.png')}
                    />
                  </TouchableOpacity>
                </View>
                <View style={{marginTop:100}}>
                  <TouchableOpacity value='popularity' onPress={() => new MainActivity().sortby('popularity')}>
                    <Text style={styles.text} >Sort by popularity</Text>
                  </TouchableOpacity>
                  <TouchableOpacity value='rating'  onPress={() => new MainActivity().sortby('rating')}>
                    <Text style={styles.text}>Sort by average rating</Text>
                  </TouchableOpacity >
                  <TouchableOpacity value='date'>
                    <Text style={styles.text}>Sort by latest</Text>
                  </TouchableOpacity>
                  <TouchableOpacity value='price' >
                    <Text style={styles.text}>Sort by price: low to high</Text>
                  </TouchableOpacity>
                  <TouchableOpacity value='price-desc' >
                    <Text style={styles.text}>Sort by price: high to low</Text>
                  </TouchableOpacity>
                </View>
              </View>
            </Modal>

{
console.log（'模式已关闭'）；
}}>
{/*模态的所有视图*/}
{/*动画可以是幻灯片、幻灯片、无*/}
{
设置showmodel（！showmodel）；
}}
>
新建MainActivity（）.sortby（'popularity'）}>
按受欢迎程度排序
新建MainActivity（）.sortby（'rating'）}>
按平均评级排序
按最新排序
按价格排序：从低到高
按价格排序：从高到低

这是我的主要活动

export default class MainActivity extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      isLoading: false,
      page: 1,
    };
    this.sortby = this.sortby.bind(this)

    this.jewellery_type = this.jewellery_type.bind(this)
  }

  componentDidMount() {
    this.setState({ isLoading: true }, this.getData)
  }


  sortby = (value) => {
    console.log(value);    
    this.setState({ isLoading: true });
    fetch(web_url + 'wp-json/wc/v3/products?consumer_key=' + web_consumerKey + '&consumer_secret=' + web_consumerSecret + '&per_page=26&page=' + this.state.page + '&status=publish&orderby=' + value)
      .then((response) => response.json())
      .then(data => {
        this.setState({ data: this.state.data.concat(data), isLoading: false });
        console.log(data);
        console.log('value vala nhi');
      })
      .catch((error) => console.error(error))
  }

  
   jewellery_type = (id) => {
     alert(id);
    console.log(id);    
    console.log('............');
    this.setState({ isLoading: true });
    fetch('https://tiarabytj.com/wp-json/wp/v2/product?jewellery_type='+ id + '&per_page=50')
      .then((response) => response.json())
      .then(data => {
        this.setState({ data: data, isLoading: false });
        console.log(data);
        console.log('id vala ' , id);
      })
      .catch((error) => console.error(error))
  }


  getData = () => {
    fetch(web_url + 'wp-json/wc/v3/products?consumer_key=' + web_consumerKey + '&consumer_secret=' + web_consumerSecret + '&per_page=26&page=' + this.state.page + '&status=publish')
      .then((response) => response.json())
      .then(data => {
        this.setState({ data: this.state.data.concat(data), isLoading: false });
  
      })
      .catch((error) => console.error(error))
  }

  renderItem = ({ item, index }) => {
    let { images, categories, meta_data, id } = item;

    if (!images[0]) return null;
    let details = images[0];

    if (!id) return null;
    let productid = item.id

    return (

      <View>

        <TouchableOpacity
          style={{
            justifyContent: 'center', alignItems: 'center',
          }}
          onPress={() => this.props.navigation.push('ViewProduct', { productid: item.id, product_name: item.name })}
        >

          <Image
            style={{ width: 170, height: 200, borderRadius: 10 }}
            source={{ uri: details.src }}
          />

          <View style={styles.gridItemImage}>
            <Text style={{ fontSize: 13, color: 'black', textAlign: 'center' }}>
              {item.name}
            </Text>
            <Text style={styles.gridItemText}>₹ {item.price} </Text>

          </View>
        </TouchableOpacity>

      </View>

    );
  }


  handleLoadMore = () => {

    this.setState({ page: this.state.page + 1 }, this.getData)

  }

  renderFooter = () => {
    return (
      <View>

        < TouchableOpacity activeOpacity={0.5} onPress={this.handleLoadMore} style={styles.loadMoreBtn} >
          <Text style={styles.btnText}>Click Load More </Text>
          {
            (this.state.isLoading)
              ?
              <ActivityIndicator color="white" size='samll' style={{ marginLeft: 10 }} />
              :
              null
          }
        </TouchableOpacity >

      </View>
    );
  }


  render() {
    const { data, isLoading } = this.state;

    return (

      <View style={{ height: '100%', }}>
        {/* <Button title='click me' onPress={this.sortby('popularity')} /> */}
        <CustomHeader title='All Product' isHome='true' navigation={this.props.navigation} style={{ height: '10%', }} />

        <View style={{ height: '10%', justifyContent: 'center', backgroundColor: '#fff' }}>
          <CategoryData navigation={this.props.navigation} />

        </View>

        <View style={{ height: '80%' }}>

          <ScrollView style={{ backgroundColor: '#FFFFFF' }}>
            <SafeAreaView style={{ marginTop: 10 }}  >

              {isLoading ? <ActivityIndicator size="large" color='#0d1a4a' style={{ marginTop: 50 }} /> : (

                <FlatGrid
                  data={data}
                  style={styles.gridView}
                 // keyExtractor={this.keyExtractor}
                 keyExtractor={(item, index) => index.toString()}

                  renderItem={this.renderItem}
                  //onEndReached={this.handleLoadMore}
                  onEndReachedThreshold={500}
                  ListFooterComponent={this.renderFooter}
                />

              )}
            </SafeAreaView >
          </ScrollView>

        </View>

        

      </View>

    );
  }
}
                    

导出默认类MainActivity扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
孤岛加载：false，
页码：1，
};
this.sortby=this.sortby.bind（this）
this.jewellery\u type=this.jewellery\u type.bind（this）
}
componentDidMount（）{
this.setState（{isLoading:true}，this.getData）
}
排序比=（值）=>{
console.log（值）；
this.setState（{isLoading:true}）；
fetch（web_url+'wp json/wc/v3/products？consumer_key='+web_consumerKey+'&consumerSecret='+web_consumerSecret+'&per_page=26&page='+this.state.page+'&status=publish&orderby='+value）
.then（（response）=>response.json（））
。然后（数据=>{
this.setState（{data:this.state.data.concat（data），isLoading:false}）；
控制台日志（数据）；
console.log（'value vala nhi'）；
})
.catch（（错误）=>console.error（错误））
}
珠宝首饰类型=（id）=>{
警报（id）；
console.log（id）；
console.log（“………”）；
this.setState（{isLoading:true}）；
取（'https://tiarabytj.com/wp-json/wp/v2/product?jewellery_type=“+id+”&每页=50'）
.then（（response）=>response.json（））
。然后（数据=>{
this.setState（{data:data，isLoading:false}）；
控制台日志（数据）；
console.log（'id vala'，id）；
})
.catch（（错误）=>console.error（错误））
}
getData=（）=>{
fetch（web_url+'wp json/wc/v3/products？consumer_key='+web_consumerKey+'&consumer_secret='+web_consumerSecret+'&per_page=26&page='+this.state.page+'&status=publish'））
.then（（response）=>response.json（））
。然后（数据=>{
this.setState（{data:this.state.data.concat（data），isLoading:false}）；
})
.catch（（错误）=>console.error（错误））
}
renderItem=（{item，index}）=>{
设{images，categories，meta_data，id}=item；
如果（！images[0]）返回空值；
让细节=图像[0]；
如果（！id）返回null；
让productid=item.id
返回(
this.props.navigation.push（'ViewProduct'，{productid:item.id，product_name:item.name}）
>
{item.name}
₹ {item.price}
);
}
handleLoadMore=（）=>{
this.setState（{page:this.state.page+1}，this.getData）
}
renderFooter=（）=>{
返回(

单击“加载更多”
{
（此.state.isLoading）
?
:
无效的
}
);
}
render（）{
const{data，isLoading}=this.state；
返回(
{/*  */}
{正在加载？：(
index.toString（）}
renderItem={this.renderItem}
//onEndReached={this.handleLoadMore}
onEndReachedThreshold={500}
ListFooterComponent={this.renderFooter}
/>
)}
);
}
}

这方面你能帮我吗@古鲁帕兰·吉里萨兰