React组件内数组调用reverse方法仅翻转一次问题咨询

• Array.reverse()属于原地修改数组的方法，你直接修改了父组件传入的props.content（也就是代码里的arrKey），再把同一个数组引用传给setnewArr时，React会通过浅比较判断状态没有发生变化，直接跳过组件重渲染，所以你只能在控制台看到数组内容变化，视图不会更新。
• 你渲染列表时遍历的是props传入的arrKey，而非你声明的本地状态newArr，哪怕状态正常更新，视图也不会读取状态值渲染。
  另外直接修改props属于不符合React单向数据流规范的操作，会意外污染父组件的状态，应该避免。

1. 反转数组前先拷贝生成新数组，保证数组引用变化，触发React重渲染
2. 视图渲染时使用本地状态newArr而非props传入的原数组

修复后的核心代码 #

修改点击事件逻辑：

<ListItem
  onClick={() => {
    // 浅拷贝当前状态数组后再反转，生成新的数组引用
    const reversedArr = [...newArr].reverse();
    setnewArr(reversedArr);
  }}
>
  {tabKey.firstRowText}
</ListItem>

修改列表渲染逻辑：

{!isEmpty(newArr) &&
  newArr.map((row, i) => (
    <List className="Listbody">
      <ListItem align="left">{i + 1}</ListItem>
      <ListItem>{row[tabKey.firstRowKey]}</ListItem>
      // 剩余原有列表渲染逻辑保持不变
   ...

内容的提问来源于stack exchange，提问作者reijkee