假设我的 json 文件在服务器中，如何使用在类设置中安装的组件进行过滤

Posted 2023-03-05

【中文标题】假设我的 json 文件在服务器中，如何使用在类设置中安装的组件进行过滤

【英文标题】：Assuming my json file is in a server, how do I filter using component did mount in a class setting

【发布时间】：2021-12-15 11:14:38

【问题描述】：

如何过滤我的componentDidMount 数据而不引发错误，componentDidMount 不支持过滤器

这是我目前的代码：

componentDidMount()    //fetch data from json server

    fetch("http://0.0.0.0:8001/shopData")
    .then(response => response.json())
    .then(data => 
      //console.log(data) 
       item = data.filter(item =>
          item.id === shopid
      )
      this.setState(item :data)
      
    
      console.log(itemArray)
     
    )
    .catch(err =>   
      console.log("Error loading data" + err);
    );
  

render()
    
    item =this.props.navigation.getParam('item'); 
    
    shopid= item.shop_id;

    console.log(this.state.shopData)

    
    return(
        <View>
            <Text>The title </Text>
             <Text>shopid</Text>
              <Text>item.name </Text>
            
        </View>

当我运行我的代码时，它只会给出一个空数组。我需要组件确实挂载并从此服务器检索它：fetch（“http://0.0.0.0:8001/shopData”），因此不能将其更改为静态文件。谁能提供有关我的过滤器为什么不起作用的见解？谢谢。对于shopid，我在渲染部分使用this.props 从上一个屏幕中检索它，但我相信它仍然应该能够将值传递给componentDidMount，因为我能够记录得到的值

【参考方案1】：

要过滤一个对象，对于每个元素，您必须返回 true 或 false。我看到您可能在这里错过了这一点：

item = data.filter(item =>
// You have to return boolean, else it always returns undefined
// which is assumed as false, gives you an empty list
      return item.id === shopid 
)

或

//if you use arrow without curly braces it's going to return the value
item = data.filter(item => item.id === shopid)

https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Global_Objects/Array/filter