javascript 如何在初始值延迟时呈现我的视图

vxbzzdmp 于 2023-11-15 发布在 Java

关注(0)|答案(3)|浏览(128)

我有一个组件，它在状态中保存一个布尔值，并呈现一个切换该值的按钮。
布尔值来自于父组件中创建的对象。当对象创建时，按钮会显示，但布尔值的实际值稍后会由另一个进程设置。

的数据

const Child = ({ obj }) => {
  const [bool, setBool] = useState(obj.aBool);

  useEffect(() => {
    obj.aBool = bool;
    console.log(obj);
  }, [bool]);

  const toggle = () => {
    setBool(!bool);
  }

  return <button onClick={toggle}>
    Value is {bool!=undefined?bool.toString():'...'}
  </button>
}

字符串
当布尔值未定义时，按钮会呈现，视图会反映这一点。布尔值随后会由setTimeout设置，如果打开控制台，您可以看到。
但是，该值不会反映在按钮中，直到您单击，之后它工作正常。
有没有一种方法可以监视对象属性，以便当它在2秒后更新时，按钮重新呈现以反映更改？

JavaScript

来源：https://stackoverflow.com/questions/77466910/how-to-render-my-view-when-initial-value-is-delayed

3条答案

按热度按时间

yqyhoc1h1#

问题

这里的问题是，传递给Child的obj prop不是任何React状态的一部分，它的对象引用永远不会改变，它只是变异了。React没有办法知道任何东西发生了变化，任何东西都需要重新渲染。

解决方案

在父组件中创建obj状态，并将其和toggle函数作为props向下传递给Child组件。当父组件中的状态更新时，Child组件将自动重新呈现。
范例：
App.js

import { useEffect, useState } from "react";
import Child from "./Child";
import "./styles.css";

export default function App() {
  const [obj, setObj] = useState({ // <-- part of React state
    aBool: undefined
  });

  useEffect(() => { // <-- side-effect to set/update the state
    setTimeout(() => {
      setObj({
        aBool: true
      });
    }, 2000);
  }, []);

  const toggle = () => { // <-- handler to toggle aBool value
    setObj((obj) => ({
      ...obj,
      aBool: !obj.aBool
    }));
  };

  return <Child obj={obj} toggle={toggle} />; // <-- obj and toggle passed as props
}

字符串
孩子

import React from "react";

const Child = ({ obj, toggle }) => {
  return (
    <button onClick={toggle}>
      Value is {obj.aBool != undefined ? obj.aBool.toString() : "..."}
    </button>
  );
};

export default Child;

型

Demo

的数据

赞(0）回复(0）举报 2023-11-15

zpjtge222#

我想知道你是否想使用Suspense，它有一个回退，直到一些东西完成加载。
我在codepen里扔了一个小例子，希望对你有帮助。
https://codepen.io/huzi8t9/pen/GRzEqpX的

import React, { useState, lazy } from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom";

const SuspensfulComponent = lazy(() => {
  
  return new Promise(function(resolve) {
        setTimeout(() => {
          resolve({ default: () => <p>Loaded </p> })
        }, 5000);
    })
});

const App = () => {
  return (
    <React.Suspense fallback={<p>Wait...</p>}>
      <SuspensfulComponent />
    </React.Suspense>
  );
};

const root = ReactDOM.createRoot(document.getElementById("app"));

root.render(<App />);

字符串
上面的例子将显示“Wait...”，直到promise在SuspensefulComponent中被解析--组件将返回一些基本的文本，但是，如果您在组件中加载了真正的数据，Suspense将在加载发生时触发并回退。
希望这对你有帮助。

赞(0）回复(0）举报 2023-11-15

htrmnn0y3#

不需要在子对象中复制状态。当父对象改变时，它只会重新呈现。
404很抱歉，没有发现你要找的页面！
https://codesandbox.io/s/epic-chaplygin-46d38q?fontsize=14&hidenavigation=1&theme=dark&file=/src/App.js:0-45

赞(0）回复(0）举报 2023-11-15

我来回答

javascript 如何在初始值延迟时呈现我的视图

3条答案

问题

解决方案

Demo

相关问题

热门标签

最新问答