由于 useEffect 重新渲染而导致图表重复

Question

我有一个父组件，我用它来将道具（即 backgroundColor）传递给子组件（<LivePortfolioGraph />）。

在我的子组件中，我有一个依赖数组，每次从父组件（即 (props.backgroundColor) 更改颜色时都会重新渲染）。

现在我不想在每次渲染时都创建一个新图表，如果图表存在，只需应用颜色选项。

非常感谢您的帮助！谢谢。

父组件

    const Main = (props) => {
    
      const [backgroundColor, setbackgroundColor] = useState('#141d27');
    
     const g = useRef(null);
    
    return (
    
     <div ref={g} className="FinancialChartIntro" >
    
        <LivePortfolioGraph g={g} backgroundColor={backgroundColor} />
    
        </div> 
    
    )
}

子组件

const  LivePortfolioGraph = (props) => {

const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);


useEffect( ()=> {

const handleStyle = _debounce(() => { chart.applyOptions({layout: {backgroundColor:props.backgroundColor  } }); }, 100)

window.addEventListener("input", handleStyle); 


const chart = createChart(props.g.current, options );


// Clean Up
return () => {


window.removeEventListener('input', handleStyle);

}



}, [props.backgroundColor])

更新 我找到了一种删除子节点（图表重复）的hacky方法。它像疯了一样减慢了页面的速度，我什至不想使用它。仍在尝试寻找其他解决方案。

<块引用>

> if(props.g.current.childNodes.length > 2) {
> props.g.current.removeChild(props.g.current.childNodes[2])  }

Answer 1

我认为您的问题是单个 useEffect 钩子做了“太多”的工作。将 chart 值移动到 React ref 中并使用效果钩子更新颜色/样式。

const  LivePortfolioGraph = (props) => {
  const [width, setWidth] = React.useState(0);
  const [height, setHeight] = React.useState(0);

  const chart = React.useRef(createChart(props.g.current, options);

  React.useEffect(()=> {
    const handleStyle = _debounce(() => {
      chart.current.applyOptions({
        layout: {
          backgroundColor: props.backgroundColor,
        },
      });
    }, 100);

    window.addEventListener("input", handleStyle); 
    // Clean Up
    return () => {
      window.removeEventListener('input', handleStyle);
    }
}, [props.backgroundColor]);