Javascript 用于链式匿名函数的React.useCallback（）

通常，为了向组件传递

onChange

回调函数，您需要执行以下操作：

const handleChange=（e）=>{
console.log（例如target.value）
}
返回(
)

如果不希望每次主组件渲染时都渲染

组件

，则必须将其包装在

React.useCallback（）

钩子中，如下所示：

const handleChange=React.useCallback（（e）=>{
console.log（例如target.value）
}, [])
返回(
)

在基于列表的for循环中生成此输入的情况下，您希望回调知道更改的来源。传递信息的最常见方式是通过链接lambda，如下所示：

const fields=['field1'，'field2'，'field3']
常量handleChange=（字段名）=>（e）=>{
console.log（`${fieldName}:`，e.target.value）
}
返回(
{fields.map（（x）=>}
)

但是在这种情况下，在使用

React.useCallback（）

hook将整个上下文保留在函数中的同时，不可能记住外部和内部lambda

在大多数情况下，我可以控制组件并更改回调以包含所需的数据，但通常情况下，组件来自库（如材质UI），因此无法修改

---

用React钩子可以以何种方式完全记住此回调？

我将如何处理此问题，方法是创建一个

状态

，并将其作为依赖项传递给

useCallback

钩子：

const [fields, setFields] = useState({'field1': "", 'field2': "", 'field3': ""});

const handleChange = React.useCallback((e) => {
  console.log(`${fieldName}: `, e.target.value);
  if(e.target.id === "field1") {
    let newFields = {...fields};
    fields.field1 = e.target.value;
    setFields(newFields);
  }
}, [fields])

return (
  <>
    {fields.map((x) => <Component onChange={handleChange(x)} />}
  </>
)

const[fields，setFields]=useState（{'field1'：“”，'field2'：“”，'field3'：“”）；
const handleChange=React.useCallback（（e）=>{
log（`${fieldName}:`，e.target.value）；
如果（e.target.id==“field1”）{
让newFields={…fields}；
fields.field1=e.target.value；
设置字段（新字段）；
}
}，[字段]）
返回(
{fields.map（（x）=>}
)

---

希望这对您有用。

您可以为每个元素生成事件处理程序，并记录事件处理程序的数组。创建元素时，根据其索引获取相关事件处理程序：

const{memo，useMemo}=React
const Demo=（{fields}）=>{
const handlers=useMemo（（）=>
fields.map（fieldName=>e=>{
console.log（`${fieldName}:`，e.target.value）
})
，[字段]）
返回(
{
fields.map(
（字段名，i）=>(
))
}
)
}
常量字段=['field1'，'field2'，'field3']
ReactDOM.render(
,
根
)