Reactjs 在父状态更改时不更新useEffect（）的反应子级

在我的父组件中：

<div>
  <h3>Option <span>{this.state.currentOption + 1}</span> of <span>{this.state.options}</span></h3>
  <Button onClick={this.handleOption} variant="primary" type="submit">
    {` Next >>`}
  </Button>
</div>

我希望在画布中渲染的对象数组中循环：

import React, { useRef, useEffect } from 'react'

const StackRender = props => {
  
  const canvasRef = useRef(null)
  
  useEffect(() => {
    const canvas = canvasRef.current
    const context = canvas.getContext('2d')
    renderOption(props.name, canvas)
  }, [])
  
  return <canvas ref={canvasRef} {...props}/>
}

import React，{useRef，useffect}来自“React”
const StackRender=props=>{
const canvasRef=useRef（空）
useffect（（）=>{
const canvas=canvasRef.current
const context=canvas.getContext（'2d'）
渲染（props.name，canvas）
}, [])
返回
}

---

但是，子组件（画布）不会在父状态更改时更新。

将

props.name

添加到

useffect

依赖项数组中，以便在

props.name

更改时调用该函数：

useffect（（）=>{
const canvas=canvasRef.current
const context=canvas.getContext（'2d'）
渲染（props.name，canvas）
}，[props.name]）

@gavgrif是的，编辑问题，我掉了一个大括号。我在上面更新了您的

useffect

的依赖项数组为空。这意味着当组件最初渲染时，它将只运行一次，而不再运行。您提到您正在调用一个“钩子”（实际上只是一个函数，而不是钩子），您希望在

StackRender

中重新渲染它，但我不确定这两个组件是如何关联的。您是否认为这是因为

props.name

发生了变化？这是否基于处于状态的

选项

？

import React, { useRef, useEffect } from 'react'

const StackRender = props => {
  
  const canvasRef = useRef(null)
  
  useEffect(() => {
    const canvas = canvasRef.current
    const context = canvas.getContext('2d')
    renderOption(props.name, canvas)
  }, [])
  
  return <canvas ref={canvasRef} {...props}/>
}