设置方法调用后上下文状态不更新答案

【问题标题】：Context state not updating after set method call设置方法调用后上下文状态不更新
【发布时间】：2019-09-07 17:00:17
【问题描述】：

我是一个想要学习 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>
    );
}

PathControls.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 组件中绘制的路径可见属性切换为真/假

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

任何帮助将不胜感激。

【问题讨论】：

当您更改isPathVisibleState 时，您是否检查过Sketch 是否重新渲染？
Sketch 组件返回 null，它不渲染任何东西，绘制发生在 MainView 中的 canvas 标签上。当我使用 useEffect() 时，它确实可以正确跟踪更改，但是我看到的示例没有使用该钩子，有什么想法吗？
您没有回答问题，Sketch 会重新渲染吗？
对不起，老实说我不知道，组件返回null并且它的局部变量不会改变

标签： javascript reactjs state

【解决方案1】：

似乎Sketch 不会重新渲染 altought isPathVisibleState 更改，尝试使用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 正文将在每次重新渲染时执行，这就是为什么我在第一个 useEffect 中将其移至 componentDidMount 循环。

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

【讨论】：