Question

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函数，我当前正在处理的页面会抛出错误＆＃34;如果您要渲染子集合，请改用数组。＆＃34;

Answer 1

它抛出错误的原因是，因为初始值是boolean，并且你试图在boolean的任何属性上运行循环，在这里：

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(....)
}

2-其他选项是，在状态中将响应定义为object而不是boolean，并将|| []与response.cc一起使用。

像这样：

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

使用#array.map渲染数组，如下所示：

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 Socket.io将json.stringify转换为json对象

1 个答案: