Question

我是ReactJS的新手并且正在尝试从JSON文件中获取数据。我创建了2个文件，一个是 products.json 和 app.jsx 。我可以在 console.log（）

中获得结果

[{…}]
0
:
{title: "Product Title", img: "./p-1.jpg", des: "DES1", rs: 599}
length
:
1
__proto__
:
Array(0)

但它正在呈现中。我有时会得到未定义，或者数据本身没有填充。

这是我的反应代码。

import React from 'react';
import Request from 'superagent';
import ReactDOM from 'react-dom';

import {
    Container,
    Col,
    Row,
    Card
} from 'react-bootstrap';

class App extends React.Component {
    render() {
        return (
            <div className="container">
                <Header />
                <Content />
                <Footer />
            </div>
        );
    }
}

// Header starts 
class Header extends React.Component {
    componentDidMount() {
        //alert('Header');
    }
    render() {
        return (
            <header>
                <h1>Header !! </h1>
            </header>

        );
    }
}
// Header ends 

// Content starts 
class Content extends React.Component {
    constructor() {
        super();
        this.state = {
            data: []
        }
    }

    componentDidMount() {
        var url = "./products.json";
        Request.get(url)
            .then((res) => {
                console.log(res.body.data);
                console.log(res.body.data.title);
                //this.setState({data: data.conversations});
                this.setState({
                    PTitle: res.body.title,
                    PImg: res.body.img,
                    PDesc: res.body.des,
                    PRs: res.body.rs
                });
            })
            .catch(function (err) {
                alert(err);
                // err.message, err.response
            });

    }
    render() {
        return (
            <ul>
                {
                    this.state.data.map((key, i) => 
                    <ProductList key={i} products={key} />)
                }
            </ul>
        )
    }
}
// Content ends 

// Footer starts 
class Footer extends React.Component {
    render() {
        return (
            <div>
                Footer !!
            </div>
        )
    }
}
// Footer ends


// Products Starts
class ProductList extends React.Component {
    render() {
        return (
            2. - <li>{PTitle}</li>
        )
    }
}
// Products Ends

export default App;

Answer 1

看起来superagent使用的是text而不是body。所以你需要做的是像这样解析你的json文件：

Request.get(url).then((res: any) =>{
    const json = JSON.parse(res.text);
    // If you have a conversations item in that response you can then do this
    this.setState({data: json.conversations});
    ...

假设conversations的值是Array，那么使用this.state.data.map迭代/循环遍历值就没有问题。

Answer 2

我对superagent不熟悉，但看起来您的输入./products.json充当http://localhost:3000/products.json（假设您在端口3000处运行反应）

我认为第一步你可以替换服务静态json来使用像https://www.mocky.io/这样的模拟服务器并生成响应

但是如果您可以使用superagent提供静态json，则必须接收数据然后设置为组件状态。

如果您的请求成功，请设置状态

// componentDidMount()

let url = 'http://www.mocky.io/v2/5a6032db100000fa02307802';

Request.get(url)
  .then((res) => {
    this.setState({data: res.body.data});  
  }).catch(() => {});

并更新您的render()方法

return (
  <ul>
    {
      this.state.data.map((product, index) => (
        <ProductList key={index} product={product} />
      ))
    }
  </ul>
)

以及最后一个ProductList render()方法，因为您发送了product作为道具

render() {
  const { title, img, des, rd } = this.props.product;

  return (
    <li>{title} : {des} : {rd} : {img}</li>
  )
}

Answer 3

编辑：你需要的是

this.setState({data: res.body.data});

然后

this.state.data.map((one_product,i) => (
   <Product key={i} product={one_product}/>
);

和

class Product extends React.Component {
    render() {
        return (
            <li>{this.props.product.title}</li>
        );
    }
}

Answer 4

在Ajax调用中执行res后，对数据数组执行setState。你是已经这样做了，但评论道。尝试以下它有轻微的变化

this.setState({
    data: res.body (or) res.body.data
})

将JSON数据循环到ReactJS中

4 个答案: