React中从数组绑定数据到Checkbox Tree节点仅显示最后一条的问题

你的问题出在循环中每次都重新赋值persons数组，而非向数组中添加元素：

const persons = []; 
for (let i = 0; i < data.length; i++) {
  // 每次循环都把persons替换成仅包含当前元素的新数组，最终只保留最后一条
  persons = [{ value: data[i].id, label: data[i].name }]; 
}  
this.setState({ persons });

修复方案一：使用push添加元素 #

修改循环逻辑，用push将每个元素追加到数组中：

const persons = []; 
for (let i = 0; i < data.length; i++) {
  persons.push({ value: data[i].id, label: data[i].name }); 
}  
this.setState({ persons });

修复方案二：使用Array.map（更简洁推荐） #

直接用map方法将接口返回的data数组转换为树组件需要的格式，代码更简洁且可读性更高：

const persons = data.map(item => ({
  value: item.id,
  label: item.name
}));
this.setState({ persons });

修改后，this.state.persons会包含所有转换后的节点数据，树视图就能正常显示全部记录了。

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