时间戳

首页 > 解决方案 > 设置方法调用后上下文状态不更新

javascript - 设置方法调用后上下文状态不更新

问题描述

我是一个寻求学习 React Kung-Fu 技术的菜鸟。

我正在努力实现 useContext 来更新来自两个兄弟组件的一组值

MainView.js

export function MainView() {
    return(
        <Fragment>
            <canvas id='paper-canvas' resize='true' />
                <ViewProvider>
                    <Sketch />
                    <PathControls />
                </ViewProvider>
            <Header />
        </Fragment>
    );
}

ViewContext.js

export const ViewContext = createContext([{}, () => {}]);

export const ViewProvider = (props) => {
    const [isPathVisibleState, setIsPathVisibleState] = useState(true);

    return(
        <ViewContext.Provider value={[isPathVisibleState, setIsPathVisibleState]}>
            {props.children}
        </ViewContext.Provider>
    );
}

路径控件.js

export default function PathControls(props) {
const [isPathVisibleState, setIsPathVisibleState] = useContext(ViewContext);

    function handlePathVisibleChange() {
        console.log(isPathVisibleState);
        setIsPathVisibleState(isPathVisibleState => !isPathVisibleState);
    }

    return(
        <div className='path-line-controls container fixed-bottom'>
            <img src={pathLineIcon} alt='Show/Hide path line' title='Show/Hide path line' onClick={handlePathVisibleChange} />
        </div>
    );
}

Sketch.js

export default function Sketch(props) {
    const [isPathVisibleState, setIsPathVisibleState] = useContext(ViewContext);

    window.onload = function() {
        // Paperjs initialization settings
        paper.install(window);
        paper.setup('paper-canvas');

        // Creates a new path line that shows the connected dots
        path = new Path();
        path.strokeColor = 'black';
        path.visible = isPathVisibleState;

        view.onMouseDown = function(event) {
            addDot(event.point);
            console.log("MOUSEDOWN------","PATH:", isPathVisibleState);
        }
    }
    function addDot(point) {
        //...
    }
    return null;
}

我的目标是让PathControls组件按钮切换值isPathVisibleState true/false，以便在Sketch组件可见属性中绘制的路径切换为 true/false

我当前的设置确实从PathControls组件切换isPathVisibleState true/false，但是当我从Sketch组件控制台该状态变量时，它始终保持在 Context 组件中设置的相同初始值。

任何帮助都感激不尽。

标签： javascriptreactjsstate

解决方案

似乎Sketch不会重新呈现 altoughtisPathVisibleState更改，请尝试使用以下命令添加副作用useEffect：

export default function Sketch(props) {
  const [isPathVisibleState, setIsPathVisibleState] = useContext(ViewContext);

  useEffect(() => {
    window.onload = function() {
      // Paperjs initialization settings
      paper.install(window);
      paper.setup("paper-canvas");

      // Creates a new path line that shows the connected dots
      path = new Path();
      path.strokeColor = "black";
    };
  }, []);

  useEffect(() => {
    path.visible = isPathVisibleState;
    view.onMouseDown = function(event) {
      addDot(event.point);
      console.log("MOUSEDOWN------", "PATH:", isPathVisibleState);
    };
  }, [isPathVisibleState]);

  function addDot(point) {
    //...
  }
  return null;
}

请注意，由于您的代码是现在编写的，Sketch因此 body 将在每次重新渲染时执行，这就是为什么我将它移到componentDidMount第一个循环中的原因useEffect。

如果它不起作用，您应该检查为什么Sketch不重新渲染，添加一个沙箱总是一个很好的步骤。

推荐阅读