ReactJS面试题：组件外定义函数的状态调用与实现方案问题

疑问1解答 #

是可以的。React的状态更新函数（比如setName这类useState返回的setter）本身就是普通JS函数，完全可以作为参数传递给外部定义的函数使用：

• 你只需要给三个question函数新增参数位，用来接收传入的状态更新函数
• 调用函数的位置（即App组件内的{question1(data)}处）补充传入对应的setter参数即可
• 整个过程你只需要修改三个question函数的参数定义和返回值逻辑，不需要改动它们的定义位置。

另外要注意两个前提：

1. 原模板漏了导入useState，需要先把引入语句改为import React, { useState } from "react"
2. 原模板里的data是写死在App内部的普通常量，直接修改它不会触发组件重渲染，要实现新增对象后页面同步更新，你需要先把data定义为useState管理的状态：const [data, setData] = useState([...原数组内容])

疑问2解答 #

不是唯一可行方案，除了把三个函数移到组件内部，至少还有两种可落地的方案：

• 传参方案：也就是疑问1提到的方案，将组件内部的状态、状态更新函数都作为参数传递给外部的question函数，外部函数拿到这些参数后完全可以实现渲染列表、绑定更新逻辑的需求
• 自定义Hook封装方案：把三个question函数封装为独立的自定义Hook，自定义Hook可以独立维护自己的状态，也可以接收传入的状态/setter，不需要放在App组件内部也能和组件的状态联动。

核心代码示例 #

// 外部定义的question1，接收data作为参数，仅修改返回值实现渲染所有name
function question1(data) {
  return (
    <div>
      {data.map((item, idx) => <p key={idx}>{item.name || '空名称'}</p>)}
    </div>
  )
}

// App组件内调用逻辑
{question1(data)}
// 新增按钮绑定逻辑，直接调用setData触发更新，三个question函数会拿到最新的data重新渲染
<button onClick={() => setData(prev => [...prev, {name: '新用户', stars: 0, popularity: '0%'}])}>Add another entry</button>

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