如何在执行map函数前先调用自定义函数，满足页面局部渲染多次调用需求

• 核心思路是通过状态驱动渲染，将random函数的执行和列表渲染逻辑解耦，避免初始渲染自动执行，同时支持多次触发调用。

1. 声明状态存储随机数结果，初始状态设为假值，保证初始渲染不会执行map逻辑：

import { useState } from 'react'

// 组件内声明
const [randomNumbers, setRandomNumbers] = useState()

2. 改造random函数，每次调用时生成新的随机数数组并更新状态：

const random = () => {
  // 此处替换为你自己的随机数生成逻辑
  const newNumbers = Array.from({length: 5}, () => Math.floor(Math.random() * 100))
  setRandomNumbers(newNumbers)
}

3. 渲染部分保留原有判断逻辑，将random函数绑定到你需要的触发时机（比如按钮点击、接口回调、滚动事件等）即可：

return (
  <div>
    {/* 示例：点击按钮触发random函数执行 */}
    <button onClick={random}>刷新随机数</button>
    {/* random函数执行更新状态后，会自动触发map渲染列表 */}
    {randomNumbers && randomNumbers.map((item, i) => (
      <div key={i}>{item}</div>
    ))}
  </div>
)

注意事项 #

• 不要在render逻辑里直接调用random()，否则会出现「重渲染→调用random→更新状态→重渲染」的死循环
• 每次调用random函数都会更新状态，自动触发列表重新渲染，完全满足多次调用的需求
• 你提供的原始代码存在语法错误，函数括号使用错误、map逻辑未闭合，按上述示例调整即可

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