React中props变更时，如何让列表内组件重新渲染？

你直接将<TestFunction t={test}/>这类JSX元素存入状态testFs，这些元素是创建瞬间的快照——test的当前值会被固化到元素的props中，后续test更新时，状态里已存在的JSX元素不会自动同步新的test值，自然不会触发重新渲染。

优先推荐存储数据而非JSX元素，在渲染阶段动态生成组件，这是更符合React设计思路的做法：

方法1：存储数据，渲染时生成组件 #

1. 修改添加逻辑，只存test的值到状态：

// 原来存JSX，现在存test的数值/内容
setTestFs([...testFs, test])

2. 更新RenderTestFunctions组件，遍历数据动态渲染TestFunction：

function RenderTestFunctions({ts}) {
    return (
        ts.map((tValue, index) => {
            return (
                <div key={index}>
                    <TestFunction t={tValue} />
                </div>
            )
        })
    )
}

这样每次RenderTestFunctions重新渲染时，都会用最新的tValue生成TestFunction组件，无论后续test如何变化，新增或修改testFs里的数据都能触发对应组件的更新。

方法2：强制重新生成JSX列表（不推荐） #

如果必须在状态中存储JSX，可通过监听test变化，重新生成整个列表的JSX元素：

import { useEffect } from 'react';

// 在父组件中添加useEffect监听test变化
useEffect(() => {
    // 将所有已有组件的t属性更新为最新test值
    setTestFs(prevList => prevList.map(() => <TestFunction t={test} />))
}, [test])

这种方法需要维护JSX元素的更新逻辑，代码冗余且容易出错，仅作为特殊场景下的备选方案。

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