react中报错Objects are not valid as a React child问题解决

今天在react跳转页面的时候报了一个Objects are not valid as a React child (found: object with keys {id, materialsCode, storageLocationCode, deleteStatus, statusCode, storageLocationName}).

从字面意思看来的话是渲染了对象导致的，所以问题根本解决方式就是修改渲染对象的部分。
仔细看了下代码发现没有显式的直接渲染对象的地方，陷入纠结。。。
后面发现是用了一个antdesign的select组件，并且启用了multiple多选模式，如下图

也就是说会有默认的一个数组值传过来给这个多选的select组件做默认展示，那么问题是不是出在这里呢，查看了一下后端给的接口，发现返回了如下图：
果然是返回了一个对象数组，那么问题的根源就是它了，解决方案就是提取出里面需要渲染为默认值的对象属性作为一个纯数组传给select组件做默认值，代码如下：

const werksList = [];
    if( materialInfo.materialsWerksList && materialInfo.materialsWerksList.length !== 0){
      materialInfo.materialsWerksList.forEach((item => {
        werksList.push(item.storageLocationCode);
        return item.storageLocationCode;
        }
      ));
    }

问题解决，效果如下