使用 reactjs 从 rest api 访问数据

Posted 2023-02-22

【中文标题】使用 reactjs 从 rest api 访问数据

【英文标题】：Accessing data from rest api with reactjs

【发布时间】：2018-01-09 18:10:24

【问题描述】：

我正在使用 react 开发一个应用程序，但我发现在处理来自 rest api 的信息时遇到了很大的麻烦。

我有一个 fetch，其中 get 方法的 api 应该为我带来客户 ID，但我总是收到这样的错误。

错误：“找不到客户” 错误 ： “找不到客户”

Image of the error

我想获得一个只有所有客户的 id 的数组，为此我创建了这个 fetch 函数，但我不知道在 .then((resposneValue) 中放入什么来获得正确的数组。我试过了map 函数，但随后出现错误，例如未定义 map prototiping。

这是我的代码：

getHistory() 
    const customer = this.state
    fetch(
        DOMAIN+'/api/customers/'+customer._id, 
            method: 'get',
            dataType: 'json',
            headers: 
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Authorization':'Bearer '+this.props.token
            
        )
        .then((response) =>
        
            return response.json();
        )
        .then((responseValue) => 
            /*responseValue.map(function (v) 
                v.platform = v.app ? v.app.platform : null  )*/
            this.setState(customsId:responseValue);
            console.log(responseValue);
        )

编辑：

我还有另一个获取：

getCustomers()

    fetch(

        DOMAIN+'/api/customers/shop/'+this.props.salon, 
            method: 'get',
            dataType: 'json',
            headers: 
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Authorization':'Bearer '+this.props.token
            
        )
        .then((response) =>
        
            console.log(this.props.salon);
            return response.json();
        )
        .then((responseData) => 
            responseData.map(function (v) 
                v.platform = v.app ? v.app.platform : null  )
            this.setState(customers:responseData);
           //console.log(responseData);

        )
        .catch(function() 
            console.log("error");
        );

then 函数中的 console.log 向我报告这个数组：

(22) […, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …]
0
:
_id: "591d66f69ea5d935ed4b9ba9", shop: …, email:...

所以问题是，如何通过第一次或第二次获取访问该 id 值？

【问题讨论】：

看起来您的 api 没有返回您传递的客户 ID 的客户详细信息。

好的，当我运行另一个像这样的提取时：DOMAIN+'/api/customers/shop/'+this.props.salon，我收到了像 _id: "591d66f69ea5d935ed4b9ba9", shop 这样的客户 ID ：…，

【参考方案1】：

这是 API 错误。表示您发送的请求带有无效的customer._id，请检查此参数。

【参考方案2】：

我是这样解决的：

我创建了这个提取

getCustomers()

    fetch(

        DOMAIN+'/api/customers/shop/'+this.props.salon, 
            method: 'get',
            dataType: 'json',
            headers: 
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Authorization':'Bearer '+this.props.token
            
        )
        .then((response) =>
        

            return response.json();
        )
        .then((responseData) => 
            responseData.map(function (v) 
                v.platform = v.app ? v.app.platform : null  )
            this.setState(customers:responseData);
           //console.log(responseData);

        )
        .catch(function() 
            console.log("error");
        );

然后我创建了一个 handleClick 来启动函数并使用 row.:_id 我可以打印 id

 handleCellClick(y,x,row)
    //this.getHistory(this.state.orders);
    this.getHistory();
    var ab= this.state.orders
    this.setState(
        open:true,
        slideIndex: 0,
        newForm:false,
        customer:...row,_id:row._id,
        order:...x,customer:x.customer

    );
    this.getCustomers(row._id);

    console.log(row._id);
    console.log(x.customer);