为什么我的组件即使在调用它的渲染功能时也不会改变？反应答案

【问题标题】：Why my component don't change even when render function it's being recalled? React为什么我的组件即使在调用它的渲染功能时也不会改变？反应
【发布时间】：2021-06-12 01:04:12
【问题描述】：

我正在使用此方法从其父级更改子组件状态：

来自父母：

this.changeBottomToolbar(newTool)

在子类上声明的方法

changeBottomToolbar(newToolbarName){
    this.setState({selectedToolbar: newToolbarName})
  }

这是状态变化，当我检查控制台时它会重新渲染。

渲染它是一个条件渲染，它使用一个函数来获取它应该渲染的内容

getBottomToolbar(){
    switch(this.state.selectedToolbar){
        case "SelectorAndText":
          console.log("Devolviendo el selector")
          return <TextBottomToolbar 
                    ref={this.bottomToolbarRef}

                    fontSizeUpdater    = {this.fontSizeUpdater}
                    fontColorUpdater   = {this.fontColorUpdater}
                    strokeColorUpdater = {this.strokeColorUpdater}
                    strokeSizeUpdater  = {this.strokeSizeUpdater}
                    fontFamilyUpdater  = {this.fontFamilyUpdater}
                    alignmentUpdater   = {this.alignmentUpdater}
                 />
        break
        case "FreeLine":
            console.log("Devolviendo el Line")
            return <LineBottomToolbar 
                    ref={this.bottomToolbarRef}

                    strokeColorUpdater = {this.strokeColorUpdater}
                    strokeSizeUpdater  = {this.strokeSizeUpdater}
                    shadowColorUpdater={this.shadowColorUpdater}
                    shadowSizeUpdater={this.shadowSizeUpdater}
                   />
        break
    }
}

我在渲染上调用它：

render(){
    const { classes } = this.props

    console.log(this.state.selectedToolbar)

    return (
      <React.Fragment>
        {
          this.getBottomToolbar()
        }
      </React.Fragment>
    );
  }

正如你在这张图片中看到的那样，它被正确执行的代码，当状态改变时它返回另一个组件

但是即使渲染它被再次调用并且它的状态它正在改变，组件它也没有改变，我完全震惊，我不知道为什么会发生这种情况，请帮助！！

【问题讨论】：

你能提供一个使用codesandbox的最小工作示例吗？ codesandbox.io/s/react-new
除了想知道为什么要从父级调用/更新子状态之外，这可能是需要提供完整组件代码示例的情况之一。一个我们可以检查和实时调试的 running 代码框会很棒。我怀疑某处存在状态突变，但这只是一种预感。能否看一个更全面的代码示例？
这是一个很大的项目，我可以尝试做一个简化版本的沙箱，但在此期间至少有人有一些提示吗？我现在处于死胡同
我把所有代码上传到这里：codesandbox.io/s/silent-moon-y3f8l?file=/meme/src/components/…
我不确定您的沙盒发生了什么，但它似乎没有呈现任何内容。

标签： javascript reactjs jsx react-component react-state

【解决方案1】：

所以问题是我错误地复制粘贴了导入（facepalm）

这是我正在做的导入，所以我认为它没有改变

import TextBottomToolbar from './BottomToolbars/TextBottomToolbar'
import LineBottomToolbar from './BottomToolbars/TextBottomToolbar'

这更正了问题：

import TextBottomToolbar from './BottomToolbars/TextBottomToolbar'
import LineBottomToolbar from './BottomToolbars/LineBottomToolbar '

【讨论】：