时间戳

首页 > 解决方案 > 对象在 useState 钩子 React

reactjs - 对象在 useState 钩子 React

问题描述

我有一个 websocket 连接，ws 传递对象，我需要访问对象并将其值作为道具传递，以便我可以在其他组件中使用它们。

const client = new W3CWebSocket("ws://QWERTY:9080/user");

export default function App() {
  const [object, setObject] = useState(""); 
   
useEffect(() => {
  client.onopen = () => {
    console.log("Connected");
  };

  client.onmessage = (e) => {
    const newObj = JSON.parse(e.data); 
    setObject(newObj);
    console.log(newObj);        

  };

  client.onclose = () => {
    console.log("Closed...");
  };

  
  return () => {
    
  }
}, [])  


    return (
      <div className="App">
        
        <Navbar />
        {Object.keys(object).map((objKey, index) => (
            <div key={index}>
              <p> {objKey} : {object[objKey]}</p>
            </div>
        ))}
        
        <DataTable object = { object } />
     </div>
    );
}

我正在尝试在浏览器上显示对象值。但我收到以下错误"Error: Objects are not valid as a React child"

Websocket 给出了这个对象：{Snapshot: {Name: "AppInfo", DataHeader: Array(24), Data: Array(47)}}

标签： reactjs

解决方案

问题出在您使用useState钩子的位置，因为您传递的状态中的初始值是字符串类型，并且您正在设置对象类型的状态，所以像下面这样更改代码它将起作用：-

const client = new W3CWebSocket("ws://QWERTY:9080/user");

export default function App() {
const [object, setObject] = useState(); // here pass null value or default object type value 

useEffect(() => {
  client.onopen = () => {
  console.log("Connected");
 };

client.onmessage = (e) => {
  const newObj = JSON.parse(e.data); 
  setObject(newObj);
  console.log(newObj);        
};

client.onclose = () => {
  console.log("Closed...");
};


  return () => {  
  }
}, [])  


return (
  <div className="App">
    
    <Navbar />
    {object && Object.keys(object).map((objKey, index) => ( // add null check over here.
        <div key={index}>
          <p> {objKey} : {object[objKey]}</p>
        </div>
    ))}
    
    <DataTable object = { object } />
 </div>
 );
}

推荐阅读