React JS调用API获取的响应数据首次加载不渲染问题求助

• 你的状态更新逻辑不符合React的渲染触发规则：React通过浅比较状态的引用判断是否需要重渲染，你直接在原有数组arr上执行push操作修改内容，数组的内存引用没有发生变化，setArray传入同一个引用的数组时，React会认为状态没有更新，因此不会触发组件重渲染。
• 只有当你输入内容、切换组件等其他操作触发了组件重渲染时，才会读取到已经被修改的数组内容，完成渲染。

直接修改API请求数据处理部分的代码，传入新数组触发引用变化：

const data = await response.json();
console.log(data.data);
if(data.data!=undefined){
  // 直接生成新数组传入setArray，触发引用变化
  setArray([...data.data])
  // 如果需要保留array中已有的旧数据，改为如下写法即可
  // setArray(prevArr => [...prevArr, ...data.data])
}

• 给状态设置初始空数组，避免首次渲染map报错：const [array, setArray] = useState([])
• 渲染前添加空值判断，同时给嵌套属性加可选链避免属性不存在时报错：

const printList = () => {
  // 无数据时返回兜底提示
  if(array.length === 0) return <div>暂无数据</div>
  return(
      <div>
          {
              array.map((data)=>
                  <div className="row" key={data.id} >
                      {/* 加可选链避免workshop为undefined时报错 */}
                      <div className="col-4" >{data.workshop?.name}</div>
                      <div className="col-4" >{data.campaignId}</div>
                      <div className="col-4" >
                      <button >RESCHEDULE</button>
                      </div>
                  </div>
              )
          }
      </div>
  )
}

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