Question

我是 React js 的新手，我正在尝试从 API 获取数据，我正在获取 this.state 中的所有数据，但在下拉列表中显示时出现上述错误。请仔细阅读代码，让我知道我哪里出错了。

Json 数据：

{
   "status":true,
   "message":"Success",
   "data":{
      "id":37,
      "pan_no":"12345",
      "pan_name":"abhishek",
      "pan_front_image":"C:\\fakepath\\download.jpg",
      "customer_image":"C:\\fakepath\\download.jpg",
      "document_type":"Driving License",
      "document_front_image":"C:\\fakepath\\download.jpg",
      "document_back_image":"C:\\fakepath\\download.jpg",
      "bank_name":"ada",
      "account_no":"12345",
      "confirmed_acc_no":"12345",
      "ifsc_code":"MITM2250451",
      "account_holder_name":"fasfdas",
      "phone_no":"1234567890",
      "nick_name":"213123"
   }
}

代码：

import React, { Component } from 'react';

class Home extends Component {

    constructor() {
        super();
        this.state = {
            data: [],
        };
    }
    componentDidMount() {
        fetch("http://127.0.0.1:8003/api/kyc/")
            .then(results => results.json())
            .then(data => this.setState({ data: data }));
        // .catch(()=>this.setState({hasErrors:true}));
    }
    render() {
        console.log(this.state.data);
        return ( <div>
            <div class = "ab-info-con" >
            <h4> Menu </h4> 
            <select> {
                this.state.data.map((obj) => { <
                    option value = { obj.id } > { obj.pan_no } </option>
                })
            } </select> 
            </div> 
            </div>

        )
    }
}

export default Home;

Answer 1

抛出错误是因为 .map 是一个数组方法，而您正在一个对象上调用它。从你的响应结构和你的代码，我可以猜到你应该做的是这个。

import React, {Component} from 'react';

class Home extends Component {

      constructor(){
        super();
        this.state = {
            id: '',
            panNo: ''
        };
      }
      
      componentDidMount() {
        fetch("http://127.0.0.1:8003/api/kyc/")
        .then(results=>results.json())
        .then(data=>this.setState({ id: data.data.id, panNo: data.data.pan_no }));
        // .catch(()=>this.setState({hasErrors:true}));
      }
      
      render(){
        
        return (
            <div>
              <div class="ab-info-con">
                <h4>Menu</h4>
                <select>
                  {
                    <option value={this.state.id}>{this.state.panNo}</option>
                  }</select>
              </div>
            </div>
           
        )
      }
    }



export default Home;

Answer 2

import React, { Component } from 'react';

class Home extends Component {
    constructor() {
        super();
        this.state = {
            data: [],
        };
    }

    componentDidMount() {
        fetch("http://127.0.0.1:8003/api/kyc/")
            .then(results => results.json())
            .then(data => this.setState({ data: data }));
        // .catch(()=>this.setState({hasErrors:true}));
    }

    renderOptions = () => {
        const { data } = this.state;
        let options = [];
        if (typeof data !== "undefined") {
            if (Object.keys(data).length === 0) {
                for (const property in data) {
                    options.push(<option value={property.id}>{property.pan_no}</option>)
                }
            }
        }
        return options;
    }

    render() {
        console.log(this.state.data);
        return (
            <div>
                <div class="ab-info-con">
                    <h4>Menu</h4>
                    <select>
                        {this.renderOptions()}
                    </select>
                </div>
            </div>

        )
    }
}

export default Home;

试试这个，我在循环数据之前添加了空检查。

Answer 3

您的示例根本不需要映射，因为您只有一条记录。要获得 id 和 panNo，您应该使用 this.state.data.data.id 和 this.state.data.data.panNo。

如果您需要在对象上使用 map()，我建议使用 Object.keys：

取而代之的是：

        <select> {
            this.state.data.map((obj) => { <
                option value = { obj.id } > { obj.pan_no } </option>
            })
        } </select>

使用这个（对这个数据结构没有意义，只是为了展示这个想法）：

        <select> {
            Object.keys(this.state.data).map((obj) => { if(obj == 'data'){ <
                option value = { this.state.data[obj].id } > { this.state.data[obj].pan_no } </option>
            }})
        } </select>

在 React js 中出现此错误的原因是什么 - TypeError: this.state.data.map is not a function

3 个答案: