Question

此地图中的错误是什么？后端工作，但是，我不知道我在这里做什么，但是任何帮助都会被赞赏

constructor(props) {
    super(props);
    this.state = {
      categories:[],
    }}

componentDidMount = async()=>{
 try{
   let data = await fetch("http://192.168.6.107:8080/cetegories");
   let res = await data.json();
   console.log("data",res);
   this.setState({
     categories:res
   })
 }
 catch(err){
   console.log(err)

 }
}

这是渲染中的地图：

 <View >
          {this.state.categories.map((item ,key)=>(
          <View key={key}>
           <Text>{item.name}</Text>
          </View> ))
          }
        </View>

服务器中的

console.log（“ data”，res）;

data Object {
[front] [23:22:26]   "results": Array [
[front] [23:22:26]     Object {
[front] [23:22:26]       "cate_id": 1,
[front] [23:22:26]       "name": "vehicles",
[front] [23:22:26]     },
[front] [23:22:26]     Object {
[front] [23:22:26]       "cate_id": 2,
[front] [23:22:26]       "name": "home",
[front] [23:22:26]     },
[front] [23:22:26]     Object {
[front] [23:22:26]       "cate_id": 3,
[front] [23:22:26]       "name": "electronics",
[front] [23:22:26]     },
[front] [23:22:26]   ],
[front] [23:22:26]   "success": true,
[front] [23:22:26] }

Answer 1

在您的api做出正确响应时，您试图在对象而不是数组中进行映射，您的状态类别看起来像这样

categories = { 
  results: [ ...data ]
}

您可以迭代类别中的结果（但是为此，您必须验证类别中是否确实有一个results属性）。

    <View >
      {this.state.categories.results.map((item ,key)=>(
      <View key={key}>
       <Text>{item.name}</Text>
      </View> ))
      }
    </View>

或更容易将结果分配给类别：

this.setState({
     categories:res.results
   })

TypeError：未定义不是函数（在'... this.state.categories.map ...'附近）

1 个答案: