React JS子组件在父状态更改后未更新答案

【问题标题】：ReactJS child component not updating after parent's state chagedReact JS子组件在父状态更改后未更新
【发布时间】：2019-11-25 03:41:40
【问题描述】：

我有一个组件，在单击按钮后，该函数会更新重新呈现组件的状态（顺序），但仅更新跨度的文本。不应该重新渲染“i 标签”吗？

const {useState, useEffect} = React;

const SortType = {
  UNSORTERED: { icon: 'fas fa-sort', next: 'ASCENDING' },
  ASCENDING: { icon: 'fas fa-sort-up', next: 'DESCENDING' },
  DESCENDING: { icon: 'fas fa-sort-down', next: 'UNSORTERED' }
}

const Sorter = ({ trigger, sortOrder }) => {
  const [order, setOrder] = useState(SortType.UNSORTERED)

  function onSort() {
    const nSortOrder = SortType[order.next]
    setOrder(nSortOrder)
    trigger(nSortOrder)
  }

  useEffect(() => {
    if (sortOrder) {
      setOrder(sortOrder)
    }
  }, [sortOrder])

  return (
    <button onClick={onSort}>
      <i className={order.icon}/>
      <span>{order.icon}</span>
    </button>
  )
}

ReactDOM.render(
  <Sorter trigger={console.log} sortOrder={SortType.UNSORTERED} />,
  document.getElementById("react")
);

<script src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

实际结果与预期结果

【问题讨论】：

组件的其余代码在哪里？你的 onSort 函数的实现在哪里？您希望别人如何帮助您处理您提供的代码？
如果跨度被更新，这意味着order.icon 正在获得新的价值，如果你说i tag 仍然是一样的，我怀疑它是很奇怪的。当您使用 devtool 检查时，“i 标签”的类别是什么？
@HuỳnhLợiNguyễn 刚刚添加了一个 sn-p 以便您可以看到，但它是一个具有以下类的 svg 标签：svg-inline--fa fa-sort fa-w-10
@GabrielBrito 您的问题解决了吗？为什么你没有做出任何回应？

标签： reactjs

【解决方案1】：

我认为问题在于您的 font-awesome 的 cdn 链接。因为正如我们所见，order.icon 的值确实发生了变化，i 标签的 className 确实发生了变化，但随后它使用未更改的“fa-sort”类呈现了奇怪的 svg 组件。刚换成另一个字体酷炫here的cdn链接，就可以正常使用了。

替换你的一行代码后代码正常工作：

const {useState, useEffect} = React;

const SortType = {
  UNSORTERED: { icon: 'fas fa-sort', next: 'ASCENDING' },
  ASCENDING: { icon: 'fas fa-sort-up', next: 'DESCENDING' },
  DESCENDING: { icon: 'fas fa-sort-down', next: 'UNSORTERED' }
}

const Sorter = ({ trigger, sortOrder }) => {
  const [order, setOrder] = useState(SortType.UNSORTERED)

  function onSort() {
    const nSortOrder = SortType[order.next]
    setOrder(nSortOrder)
    trigger(nSortOrder)
  }

  useEffect(() => {
    if (sortOrder) {
      setOrder(sortOrder)
    }
  }, [sortOrder])

  return (
    <button onClick={onSort}>
      <i className={order.icon}></i>
      <span>{order.icon}</span>
    </button>
  )
}

ReactDOM.render(
  <Sorter trigger={console.log} sortOrder={SortType.UNSORTERED} />,
  document.getElementById("react")
);

<!-- REPLACED HERE -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

【讨论】：