时间戳

首页 > 解决方案 > 传递状态与 useState 反应

reactjs - 传递状态与 useState 反应

问题描述

我是新来的反应并试图通过构建这个简单的应用程序来学习。我想在子组件中公开来自父应用程序的数据，但我在组件中的结果似乎为空。我应该怎么做才能让结果在子组件中出现并重新渲染？

    import React, { useState, useEffect } from "react";
    import socketIOClient from "socket.io-client";
    import Main from "./Main";
    import Response from "./response"
    const ENDPOINT = "http://127.0.0.1:4001";
    
    
    function App() {
      const [response, setResponse] = useState([]);
    
    
      useEffect(() => {
        const socket = socketIOClient(ENDPOINT);
        socket.on("tick", (data) => {
          setResponse(data);
        });
      }, []);
    
    
    
      console.log(response);
    
    
      return (
        <>
          <div style={{ textAlign: "center" }}>
            <Main
             responseCurrency = {response.map(memb => <div>{memb.currencyPairName}</div>)}
             dataObject = {response}
            />
          </div>
        </>
    
      );
    }
    
    export default App;

   import './Main.css';
   
   function Main(props) {
   
     const [result, setResult] = React.useState(props.dataObject);
   
     React.useEffect(() => {
       console.log(result)
       setResult(result);
     }, [result]);
   
     return <div className="container">
     {result[0]}
     <div id="palceholder1" className="placeholder">hello</div>
     <div id="palceholder2" className="placeholder"></div>
     <div id="palceholder3" className="placeholder"></div>
     </div>;
   }
   
   
   export default Main;

我是 ReactJS 的初学者，所以我现在迷路了。希望有人能阐明..提前谢谢

加利

标签： reactjsreact-hooksuse-state

解决方案

function Main(props) {
   
     const [result, setResult] = React.useState(props.dataObject);

问题是您正在将道具复制到状态中。上面这行代码说要为 Main 创建一个新状态，其初始值为 props.dataObject。当 props.dataObject 以后发生变化时，这个状态不会发生任何事情。

相反，您应该直接使用该道具：

function Main(props) {
  return (
    <div className="container">
      {props.dataObject[0]}
      <div id="palceholder1" className="placeholder">
        hello
      </div>
      <div id="palceholder2" className="placeholder"></div>
      <div id="palceholder3" className="placeholder"></div>
    </div>
  );
}

推荐阅读