Javascript 更改为反应状态不会更新功能组件中的显示

我创建了一个简单的、由两部分组成的应用程序，其中动物的名称显示动物的图标，以概括我在一个更复杂的应用程序中遇到的问题

一旦一个随机的动物被选中并合并到状态中，显示组件应该重新渲染，动物也应该更新，因为状态是通过道具传递的，或者我认为是这样

取而代之的是，我们被困在第一个随机选择的动物的图标上

我很想知道为什么图标没有更新，因为我认为当状态改变时，它会重新呈现使用该信息的组件（在本例中为显示组件和控制台）。loganimalIcon正确地向我显示，每次重新呈现显示组件时，正确地为动物分配了正确的元素/图标

唯一不变的是Display组件的return语句中{animalIcon}的输出

类应用程序扩展了React.Component{ 构造器{ 超级作物； 此.state={ 当前动物： } this.getAnimal=this.getAnimal.bindthis； } getAnimal{ 函数getRandomAnimalarr{ 函数getRandomIndexmin，最大值{ min=Math.ceilmin； max=Math.floormax； 返回Math.floorMath.random*max-min+1+min； } 返回arr[getRandomIndex0，arr.length-1]； } const allAnimals=[“猫”、“狗”、“老鼠”]； const chosenAnimal=GetRandomanimalanimal； this.setState{currentAnimal:chosenAnimal}； } 渲染{ 回来 } } 功能展示道具{ 常量图标={ 猫：， 狗：， 鼠标：， } 让animalIcon=icons[props.animal.toLowerCase]； console.loganimalion； 回来 {props.animal}看起来像{animalIcon} 得到新的动物 } ReactDOM.render，document.querySelector'.root'； 您可以使用属性包装动物，因为您正在传递道具，它似乎没有正确更新。这将告诉react在动物名称更改时更新图标

<span key={props.animal}>{
      animalIcon
    }</span>

类应用程序扩展了React.Component{ 构造器{ 超级作物； 此.state={ 当前动物： } this.getAnimal=this.getAnimal.bindthis； } getAnimal{ 函数getRandomAnimalarr{ 函数getRandomIndexmin，最大值{ min=Math.ceilmin； max=Math.floormax； 返回Math.floorMath.random*max-min+1+min； } 返回arr[getRandomIndex0，arr.length-1]； } const allAnimals=[“猫”、“狗”、“老鼠”]； const chosenAnimal=GetRandomanimalanimal； 这是我的国家{ 当前动物：乔森动物 }; } 渲染{ 返回< 显示getAnimal={ 这是我的宠物 } 动物={ 这是一只动物 } /> } } 功能显示道具{ 常量图标={ 类别：， 狗：， 鼠标：， } 让animalIcon=icons[props.animal.toLowerCase]； console.logprops.animal； 返回{ 动物道具 } 看起来像{ 动物 }< 按钮onClick={ 道具 }>获取新动物< /div> } ReactDOM.render，document.querySelector.root； 您可以使用属性包装动物，因为您正在传递道具，它似乎没有正确更新。这将告诉react在动物名称更改时更新图标

<span key={props.animal}>{
      animalIcon
    }</span>

类应用程序扩展了React.Component{ 构造器{ 超级作物； 此.state={ 当前动物： } this.getAnimal=this.getAnimal.bindthis； } getAnimal{ 函数getRandomAnimalarr{ 函数getRandomIndexmin，最大值{ min=Math.ceilmin； max=Math.floormax； 返回Math.floorMath.random*max-min+1+min； } 返回arr[getRandomIndex0，arr.length-1]； } const allAnimals=[“猫”、“狗”、“老鼠”]； const chosenAnimal=GetRandomanimalanimal； 这是我的国家{ 当前动物：乔森动物 }; } 渲染{ 返回< 显示getAnimal={ 这是我的宠物 } 动物={ 这是一只动物 } /> } } 功能显示道具{ 常量图标={ 类别：， 狗：， 鼠标：， } 让animalIcon=icons[props.animal.toLowerCase]； console.logprops.animal； 返回{ 动物道具 } 看起来像{ 动物 }< 按钮onClick={ 道具 }>获取新动物< /div> } ReactDOM.render，document.querySelector.root；

---

可能是@BoyWithSilverWings的复制品我从没想过它的字体会很棒

---

这就是问题所在。这是我一直在寻找的实际解决方案。谢谢可能是@BoyWithSilverWings的复制品我从没想过这会是一个令人敬畏的字体问题。这是我一直在寻找的实际解决方案。谢谢