react 在列表页面增加所属材料

在列表页面增加所属材料列，不考虑数据，可以现在column里增加：

{
title: '所属材料',
dataIndex: 'materials',
key: 'materials'
},

然后得到数据，处理数据：

state = {
data: [],
materialData: [], // 添加materialData属性
loading: true,
currentPage: 1,
totalPages: 1,
totalCount: 0
}

接口中得到数据：
 

async fetchMaterialsData() {
try {
const response = await axios.get(`${Config.BASE_URL}/api/v1/all_materials`, {
withCredentials: true
})
if (response.data.message == "ok") {
let materialData = response.data.data
this.setState({ materialData }) // 存储材料数据到state中
}
} catch (error) {
console.error(error)
// removeToken()
// window.location.href = '/'
}

以及和列表页面的数据关联：

async fetchData(page = 1) {
try {
const response = await axios.get(`${Config.BASE_URL}/api/v1/calculation_results?page=${page}`, {
withCredentials: true
})
if (response.data.message == "ok") {
const data = response.data.data.map((item) => ({
key: item.id,
id: item.id,
algorithm_name: item.algorithm_name,
calculation_plan_name: item.calculation_plans.name,
calculation_plan_id: item.calculation_plans.id,
calculated_at: moment(item.calculated_at).format('YYYY-MM-DD HH:mm:ss'),
materialName: this.getMaterialName(item.materials) // 添加materialName属性
}));
data.sort((a, b) => new Date(b.id) - new Date(a.id));
this.setState({
data,
loading: false,
totalPages: response.data.totalPages,
totalCount: response.data.totalCount,
});
}
} catch (error) {
console.error(error)
// removeToken()
// window.location.href = '/'
}
}

增加一个函数，用来把材料的ID和名称进行匹配：

getMaterialName(materialIds) {
const { materialData } = this.state;
const material = materialData.find((item) => item.id === materialIds[0]);
return material ? material.name : '';
}

修改数据：

const columns = [
// ...
{
title: '所属材料',
dataIndex: 'materialName', // 修改为materialName
key: 'materialName'
},
// ...
];

考虑到材料是多个（数组），可以修改函数：
 

getMaterialName(materialIds) {
const { materialData } = this.state;
const materialNames = materialIds.map(materialId => {
const material = materialData.find(item => item.id === materialId);
return material ? material.name : '';
});
return materialNames.join(', '); // 将多个材料名称用逗号分隔
}