Question

我是新的反应本机，我试图获取数据不起作用...这就是我做的：

首先我得到我的数据：

    constructor() {
    super();

    this.state = {
        layoutData: {}
    };

}

componentDidMount() {
    fetch('https://www.mywebsite.org/getmyjson.php')
    .then(response => response.json())
    .then(response => {
        this.setState({
            layoutData: response
        });
    })
    .catch((error) => {
        console.log("error : " + error);
    });
}

然后我尝试在我的JSON数据中映射数组（使用rep变量）：

    render() {

    var test = {"libelle":"my libelle","reponse": [ {"color": "orange", "text": "14576"}, {"color": "green","text": "my text"}],"image":"rs2016-img01.png","annotation":"my annotation","source":"Source "}


    var rep = this.state.layoutData;

    console.log("//////////////////////////////////////////////");
    console.log(rep.reponse);
    console.log("//////////////////////////////////////////////");
    console.log(test.reponse);
    console.log("//////////////////////////////////////////////");
    console.log(typeof(rep.reponse));
    console.log("//////////////////////////////////////////////");
    console.log(typeof(test.reponse));
    console.log("//////////////////////////////////////////////");

    var t = rep.reponse.map(function(item) {
        return {
            key: item.color,
            label: item.text

        };
    });

    var data2 = test.reponse.map(function(item) {
        return {
            key: item.color,
            label: item.text

        };
    });

我收到错误“TypeError：undefined不是对象（评估'rep.reponse.map'）

开始讨厌的地方是：
1-测试变量代表我得到的JSON 2-所有console.logs对于rep和test都是相同的（即rep与测试具有相同的数据和类型）
3-我没有收到错误“test.reponse.map”

知道我的错误在哪里？

这是控制台日志：

I / ReactNativeJS（2911）：//////////////////////////////////////// ////// I / ReactNativeJS（2911）：[{color：'orange'，text：'14576'}， I / ReactNativeJS（2911）：{color：'green'，text：'-4％par rapport├á2015'}] I / ReactNativeJS（2911）：/////////////////////////////////////////// /// I / ReactNativeJS（2911）：[{color：'＃FF0000'，text：'14576'}， I / ReactNativeJS（2911）：{color：'green'，text：'-4％par rapport├á2015'}] I / ReactNativeJS（2911）：/////////////////////////////////////////// /// I / ReactNativeJS（2911）：对象 I / ReactNativeJS（2911）：/////////////////////////////////////////// /// I / ReactNativeJS（2911）：对象 I / ReactNativeJS（2911）：/////////////////////////////////////////// ///

Answer 1

初始状态值应该是，

this.state = {
        layoutData: {
                  reponse : []
        }
    };

其余的看起来很好，除非你的api响应格式正确

Answer 2

当第一次渲染发生时，获取请求尚未触发，因此layoutData中没有任何内容。此外，获取请求是异步，您需要在呈现之前先等待它。保持加载状态将有助于你：

constructor() {
    super();

    this.state = {
        loading:true
        layoutData: {}
    };

}


componentDidMount() {
    this.setState({loading:true})
    fetch('https://www.mywebsite.org/getmyjson.php')
    .then(response => response.json())
    .then(response => {
        this.setState({
            loading:false
            layoutData: response
        });
    })
    .catch((error) => {
        console.log("error : " + error);
    });
}

然后在渲染方法中使用此加载状态，如：

if (!this.state.loading) {
  console.log(rep.response) //will help you see that the data is received
  var t = rep.reponse.map(function(item) {
    return {
      key: item.color,
      label: item.text
    }
  })
}

获取数据不起作用本机

2 个答案: