React JS不使用扩展运算符获取所有PCR动态数据并渲染至表格如何实现

问题根因 #

你当前直接将接口返回的对象类型的response.data赋值给数组类型的state.Data，表格渲染逻辑需要遍历数组，因此无法正常展示数据。且硬编码合并PCR1、PCR2的写法无法适配后续新增的PCR分类。

实现方案 #

可以通过Object.values()获取返回对象中所有PCR分类对应的数组，再通过Array.prototype.reduce配合concat方法合并所有数组，全程不需要使用扩展运算符，后续新增PCR3、PCR4等分类时无需修改前端代码，只需修改getFetchData方法中的setState逻辑即可：

getFetchData() {
  axios.get(' /AmpRestAPI/webresources/getPCRList/all',
    {
      headers: {
        'Access-Control-Allow-Origin': '*',
      },
      auth: {
        username: 'admin',
        password: 'password'
      }
    })
    .then((response) => {
      console.log(response.data);
      // 自动合并所有PCR分类下的数组，无需手动指定PCR1/PCR2
      const mergedData = Object.values(response.data).reduce((result, currentArr) => {
        return result.concat(currentArr)
      }, [])
      this.setState({ Data: mergedData });
    }).catch(error => {
      this.setState({ error: 'unable to fetch URL' });
      console.log(error.response);
    });
}

逻辑说明 #

• Object.values(response.data)会自动提取接口返回对象中所有属性的值，不管是PCR1、PCR2还是后续新增的PCRn对应的数组都会被自动识别
• 用reduce遍历所有子数组，通过concat方法拼接为一个总数组，全程未使用扩展运算符，符合要求
• 原有表格渲染逻辑无需修改，可直接适配合并后的数组

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