Question

React和React钩子的新手。我试图了解为什么我的状态被initialState覆盖。

当我输入一个值时，一切按预期进行。但是，当我调整窗口大小时，会将其重置为initialState，我不确定为什么。将值插入输入updateBox后，将显示正确的值。

有人能为我解释发生了什么吗？

https://stackblitz.com/edit/react-hdf3sg


import React,{useState,useEffect,useRef} from 'react';
import './Layout.scss';

const initLayout = {
  size:{
    width: 16,
    height: 16,
  }
}
const clone = (obj) => {
  return JSON.parse(JSON.stringify(obj));
}

const Layout = ({props}) => {

  const boxContainer = useRef(null);

  const [layoutState,setLayoutState] = useState(initLayout)
  const [boxStyle,setBoxStyle] = useState({
    "height": "100%",
    "width": "90%",
  })

  useEffect(() =>{
    // State did update
    console.log("useEffect:State did update:",layoutState.size.width,":",layoutState.size.height)
    // updateBox()
  });

  useEffect(() =>{
    // Component did mount
    console.log("Component did mount")
    window.addEventListener("resize", updateBox);
    return () => {
      window.removeEventListener("resize", updateBox);
    };
  }, []);

  useEffect(() => {
    // This state did update
    console.log("layoutState did update",layoutState)
    updateBox()
  }, [layoutState]);

  const updateBox = () => {
    console.log("updateBox",layoutState.size.width,":",layoutState.size.height)

    let percentage = (layoutState.size.height/layoutState.size.width) * 100
    if(percentage > 100){
      percentage = 100
    }
    percentage = percentage+"%"

    // console.log("percentage",percentage)

    const cloneBoxStyle = clone(boxStyle)

    cloneBoxStyle.width = "100%"
    cloneBoxStyle.height = percentage
    setBoxStyle(cloneBoxStyle)

    // console.log("boxContainer",boxContainer)
    // console.log("height",boxContainer.current.clientHeight)
    // console.log("width",boxContainer.current.clientWidth)

  }



  const sizeRatioOnChange = (widthArg,heightArg) => {
    let width = (widthArg === null) ? layoutState.size.width : widthArg;
    let height = (heightArg === null) ? layoutState.size.height : heightArg;

    const cloneLayoutState = clone(layoutState);
    cloneLayoutState.size.width = width
    cloneLayoutState.size.height = height

    setLayoutState(cloneLayoutState)
  }

  const render = () => {
    console.log("render",layoutState.size.width,":",layoutState.size.height)
    // updateBox()
    // const enlargeClass = (true) ? " enlarge" : "" ;

    return (
      <div className={"layout"} >
        <div className="layout-tools-top">
          Layout Size Ratio 
          <input 
            type="number" 
            value={layoutState.size.width} 
            onChange={(e) => {sizeRatioOnChange(e.target.value,null)}}/>
          by
          <input 
            type="number" 
            value={layoutState.size.height} 
            onChange={(e) => {sizeRatioOnChange(null,e.target.value)}}/>

          <button className="button close">
            Close
          </button>
        </div>

        <div className="layout-container">
          <div className="layout-tools-side">
            <h2>Header</h2>
            <ul>

            </ul>
            <form>
              <input type="text" placeholder="Add Item" />
            </form>
          </div>
          <div className="layout-box-container" ref={boxContainer}>
            <div className="layout-box" style={boxStyle}>
              {/* {boxStyle.height} x {boxStyle.width} */}
            </div>
          </div>
        </div>
      </div>
    );
  }

  return render();
};

export default Layout;

Answer 1

问题在这里：

 useEffect(() =>{
    // Component did mount
    console.log("Component did mount")
    window.addEventListener("resize", updateBox); //HERE
    return () => {
      window.removeEventListener("resize", updateBox);
    };
  }, []);

您绑定到调整大小窗口事件的 updateBox 函数将使用其绑定时（组件安装时）的状态，因为 addEventListener的回调在其自身的闭包中执行。

要解决此问题，您必须将状态保存在ref内，这样，即使从另一个闭包中访问它，它也仍然是当前状态。因此，首先创建ref并将状态存储在其中：

const [layoutState,setLayoutState] = useState(initLayout);
const layoutRef= useRef({});
layoutRef.current = layoutState;

，然后在 updateBox 函数中，您从 layoutRef 而不是 layoutState 中读取布局“状态”：

  const updateBox = () => {
    let percentage = (layoutRef.current.size.height/layoutRef.current.size.width) * 100

    if(percentage > 100){
      percentage = 100
    }
    percentage = percentage+"%"

    const cloneBoxStyle = clone(boxStyle);

    cloneBoxStyle.width = "100%"
    cloneBoxStyle.height = percentage
    setBoxStyle(cloneBoxStyle)
  }

请让我知道它是否有效，因为这是我的第一个答案：）

Answer 2

尝试将您的初始状态移到组件外，或者直接设置它。在调整大小功能中，您正在设置另一个状态对象，它正在重新渲染组件，但是由于您的初始状态在组件内部，所以我认为您只是将其添加回每次重新渲染的状态。

也可能与您的问题无关，您可能希望清理调整大小的功能，否则您很可能会遇到一些问题。所说的全部尝试做如下事情：

import React,{useState,useEffect,useRef} from 'react';
import './VenueLayout.scss';

import {clone} from '../../../common/utils/clone'

const initVenueLayout = {
    venueSize:{
      width: 16,
      height: 16,
    }
  }

const VenueLayout = ({props}) => {

  const boxContainer = useRef(null);


  const [venueLayoutState,setVenueLayoutState] = useState(initVenueLayout)
  const [boxStyle,setBoxStyle] = useState({
    "height": "100%",
    "width": "90%",
  })

  useEffect(() =>{
    // State did update
  });

  useEffect(() =>{
    // Component did mount
    console.log("Component did mount")
    window.addEventListener("resize", updateBox);
    return () => {
        window.removeEventListener("resize", updateBox);
    };
  }, []);

  useEffect(() => {
    // This state did update
    console.log("venueLayoutState did update",venueLayoutState)
    updateBox()
  }, [venueLayoutState]);

  const updateBox = () => {
    console.log("updateBox",venueLayoutState.venueSize.width,":",venueLayoutState.venueSize.height)

    let percentage = (venueLayoutState.venueSize.height/venueLayoutState.venueSize.width) * 100
    if(percentage > 100){
      percentage = 100
    }
    percentage = percentage+"%"

    // console.log("percentage",percentage)

    const cloneBoxStyle = clone(boxStyle)

    cloneBoxStyle.width = "100%"
    cloneBoxStyle.height = percentage
    setBoxStyle(cloneBoxStyle)

    // console.log("boxContainer",boxContainer)
    // console.log("height",boxContainer.current.clientHeight)
    // console.log("width",boxContainer.current.clientWidth)

  }



  const venueSizeRatioOnChange = (widthArg,heightArg) => {
    let width = (widthArg === null) ? venueLayoutState.venueSize.width : widthArg;
    let height = (heightArg === null) ? venueLayoutState.venueSize.height : heightArg;

    const cloneVenueLayoutState = clone(venueLayoutState);
    cloneVenueLayoutState.venueSize.width = width
    cloneVenueLayoutState.venueSize.height = height

    setVenueLayoutState(cloneVenueLayoutState)
  }

  const render = () => {
    console.log("render",venueLayoutState.venueSize.width,":",venueLayoutState.venueSize.height)
    // updateBox()
    const enlargeClass = (props.enlarge) ? " enlarge" : "" ;

    return (
      <div className={"venue-layout"+enlargeClass} >
        <div className="venue-layout-tools-top">
          Venue Size Ratio 
          <input 
            type="number" 
            value={venueLayoutState.venueSize.width} 
            onChange={(e) => {venueSizeRatioOnChange(e.target.value,null)}}/>
          by
          <input 
            type="number" 
            value={venueLayoutState.venueSize.height} 
            onChange={(e) => {venueSizeRatioOnChange(null,e.target.value)}}/>

          <button className="button close" onClick={props.toggleVenueLayout}>
            Close
          </button>
        </div>

        <div className="venue-layout-container">
          <div className="venue-layout-tools-side">
            side tools
          </div>
          <div className="venue-layout-box-container" ref={boxContainer}>
            <div className="venue-layout-box" style={boxStyle}>
              {boxStyle.height} x {boxStyle.width}
            </div>
          </div>
        </div>
      </div>
    );
  }

  return render();
};

export default VenueLayout;

状态正在重置

2 个答案: