ReactJS Socket.io将json.stringify转换为json对象

Parse抛出错误！ 我目前正在通过套接字传递数据，我可以成功地读取数据，但将其用作json对象会给我带来很多麻烦。这是我的密码

import React, { Component } from "react";
import socketIOClient from "socket.io-client";
class App extends Component {
  constructor() {
    super();
    this.state = {
      response: false,
      endpoint: "http://127.0.0.1:4001"
    };
  }
  componentDidMount() {
    const { endpoint } = this.state;
    const socket = socketIOClient(endpoint);
    socket.on("message", mi => this.setState({ response: mi }));
  }
  render() {
    const { response } = this.state;
    const data = response.cc
    return (
      <div style={{ textAlign: "center" }}>
          {
            JSON.stringify(data)
          }
      </div>
    );
  }
}
export default App;

---

我正在使用jsonfile读取文件并检查更改，如果是，请将其推送过去。在不使用JSON.stringify函数的情况下，我当前使用的页面会抛出一个错误。如果要呈现子对象集合，请改用数组。

它抛出错误的原因是，初始值是布尔值，并且您正在尝试对布尔值的任何属性运行循环，如下所示：

const { response } = this.state;   // response = false
const data = response.cc           // data will be undefined
data.map(.....)                    // can't read property map of undefined

解决方案：

1-一个选项是跳过渲染，直到您没有从服务器获取数据为止

像这样：

render(){
    if(!this.state.response)
        return <div>Loading...</div>

    return(....)
}

constructor() {
    super();
    this.state = {
      response: {},
      endpoint: "http://127.0.0.1:4001"
    };
}

render() {
    const { response } = this.state;
    const data = response.cc || [];
    return (
        <div style={{ textAlign: "center" }}>
        {
            data.map(el => (
                <div key={el.id}>
                    <p>Rank: {el.rank}</p>
                    <p>Price: {el.price_usd}</p>
                </div>
            ))
        }
        </div>
    );
}

使用渲染数组，如下所示：

render(){
    if(!this.state.response)
        return <div>Loading...</div>

    return(....)
}

constructor() {
    super();
    this.state = {
      response: {},
      endpoint: "http://127.0.0.1:4001"
    };
}

render() {
    const { response } = this.state;
    const data = response.cc || [];
    return (
        <div style={{ textAlign: "center" }}>
        {
            data.map(el => (
                <div key={el.id}>
                    <p>Rank: {el.rank}</p>
                    <p>Price: {el.price_usd}</p>
                </div>
            ))
        }
        </div>
    );
}

---

提到完整的数据，你提到的错误是很常见的，你会发现很多解决方案，检查如何在ReactJS中呈现对象属性。我正在尝试学习套接字，并发现这是一个很好的起点。将搜索并查看我找到的内容，谢谢检查此问题，您可能不需要对JSON数据和render@ImranChowdhry这是一个数组，所以对于每个物品，你想要呈现什么属性？@MayankShukla我只想要列表中硬币的等级名称和价格。在同一组件中手动加载json文件时，我已经让map函数工作，但它不会更新任何内容。这样我有更新值，但我不能以我想要的方式渲染它！非常感谢你！！这成功了！为什么| |[]允许它工作？其他一切都是有意义的，我非常感谢您的帮助，因为如果response={}，那么response.cc将是未定义的，| |[]将默认值作为空白数组分配给response.cc，它将工作。啊，ok是有意义的。拥有一双新鲜的眼睛非常有帮助：很高兴，它帮助了你：