问题一.使用ra的field，一列只能展示一个字段，那如果在一列展示后端传来的两个字段呢？
解决：使用单独的组件，在该组件中通过antd的<col>来解决
<Col>
<p></p>
<Button></Button>
</Col>
问题二：后端传来的字段是1，转化成对应的汉字
const Choice = {
0: '作业',
1: '完成' ,
2: '未完成'
}
// 取值 value = 1 就是对象取值的问题。。。。。
<p>>Choice[value]</p>
问题三：点击一个按钮去调接口访问，使用ant design的抽屉，显示列表，怎么做到 1 2 3 都在表里，如果结果只有3，只显示3，其他为空。然后实现，有记录为编辑，没记录是保存。编辑表使用antd的编辑行的实现。
解决：
1.建立一个空数组res=[],先遍历[top1,top2,top3],
2.如果reslut的length为0，那就创建一个对象，把它push进去res。
3.如果result的length不为0，建立一个空对象item，遍历result，item=reslut[i], 将有的记录保存起来。
3.1.如果item=null，那就push进去剩下的没有的
3.2.否则push进去现有的。
4.返回该数组，将table中的dataresource替换掉
const tableData = (result) => {
let resultData = [];
let markName = ['1', '2', '3'];
for ( let i = 0; i < markName.length; i++ ) {
let name = markName[i];
if (result.length === 0) {
resultData.push({
'age': undefined
'name': [name],
'id': undefined,
});
} else {
let item = null;
for( let j = 0; j < result.length; j++ ) {
if (name === result[j].name) {
item = result[j];
break;
}
}
if (item === null) {
resultData.push({
'age': undefined
'name': [name],
'id': undefined,
});
} else {
resultData.push(item);
item = null;
}
}
}
return resultData;
}
问题四：怎么实现没有记录的时候点击保存调新增接口，有的时候点击保存调编辑接口
const save = ( record ) => {
// 无id表示为保存
if ( record.id === undefined ) {
add(record); //新增
} else {
// 调编辑接口
}
};
问题五：table的编辑行，没有+折叠input框的demo，那么怎么结合折叠的状态发生变化，点编辑出现input，取消出现文本的形式？
解决：设置一个可编辑的状态，（编辑行demo中有），setEditing，判断editable是不是true，为true就是可编辑的，否则不可编辑。
const [editingKey, setEditingKey] = useState('');
// 判断是否编辑状态
const isEditing = record => {
return record.name === editingKey;
};
// 点击编辑时
const edit = record => {
setEditingKey(record.name); // record.name === editingKey（setEditing设置的） 为true
};
// 展开事件
const expand = ( record ) => {
const editable = isEditing(record);
return editable ? (
<Input/>
)
: <p></p>
}
问题六 select的onchange事件既传id又传value（后端需要的字段）的情况，id怎么一层一层的传，在select1中点了某个option，结果要在select2中渲染。
//select 第二级 dataid先在reducer中存一一下，每次通过onchange传最新的reducer
//finderrorbyid 传来的id为第一层中level1的 item.id
const findErrorById = ( id ) => {
let res = [];
for(let i = 0; i< data.level2.length; i++) {
if ( data.level2[i].id === id ) {
res = data.level2[i].values;
}
}
return res; // 第二层中要显示的数据
}
// select第二层 对finderrorbyid的结果进行展示
<Select
value={error_types.name}
onChange={e => onChange("name")(e)}
>
{mapDataToOptions(findErrorById(Number(dataId)).map(item => (
{ value: item.value, text: item.name, id: item.id }
))
)}
</Select>
// 展示方法
function mapDataToOptions(data) {
return data.map(item => (
<Select.Option title={item.text} value={item.value+'?'+Number(item.id)}>
{item.text}
</Select.Option>
));
};
// onchange怎么传id和value id进行保存 value对应传给key所对应的字段
```javascript
//e = id?value
const onChange = (key) => e => { // onchange(key)(e)
let value = e.split('?')[0];
let id = e.split('?')[1];
dispatch({
type: SAVE_ID,
payload: id,
})
dispatch({
type: CHANGE_LIST,
payload: [key]: value, // "name":value
});
};
//但是这样有问题，传过去的字段可能是英文，但是你要展示中文，其中的原因就是<select value={error_types.name}> 中传的字段和select option中value字段不一致导致的，即使你传了[name]='zhangsan',也显示不了张三。
// 解决，value传item.text+id， 传text中文给后端
// 其他：未想到
问题七：table的分页
简单思路：在useeffect中发送dispatch调用getlist的接口，传需要的参数例如：id和num 每页的数量，和page当前页。
之后在table中的pagination中的onchange事件中也调用getlist接口传num、page、id等。
问题八：
checkbox可选，每次选时调接口，然后如果选了就展示出来，问题是，可以根据后端传的0/1进行展示，但是此时的checkbox选不了。页面刷新后，显示已选。
解决：
// 1.首先用创建一个state 其中table中的datasource指的就是datasource
const [dataSource, setDataSource] = useState([]); // 建一个初始值
useEffect(() => {
setDataSource(list); // 设为后端传来的data并监听它的变化
}, [list]);
//2.点击checkbox时 checked是否选中后根据后端传来的is_check来判断
<Checkbox checked={record.is_check} onChange={e => handleChange(e)(record, index)}/>
//3.change事件
const handleChange = (e) => (record, changeIndex) => {
const tmpList = dataSource.map(({ is_check, ...item }, index) => { //遍历后端给的list
return {
check_flag: changeIndex === index ? e.target.checked : is_check, //如果点击的index不等于list的index，就是没点击的其他行，让其他行按照传来的is_check进行展示，其他的变成e.target.checked 可以为true，也可以为false
...item
}
});
setDataSource(tmpList); //变成修改后的datasource
// 接口
checkApi({
id: record.id,
is_check: e.target.checked === true ? 1 : 0 //给后端传0或者1
}).then(()=>{})
}
问题九(x)
： 点击一个一个button 弹出一个框，如果点了OK，实现页面跳转，自己是使用一个状态设为false，如果点了ok就让它变为true，如果取消就是false，不让它调，但是我会根据true和false来对a标签的href设置，如果为false，那就是空，如果为true就是url，这样的问题是你还得重新再点一下a标签。
解决：
// 路由携带参数
history.push({
pathname: '/cs/transfer/evaluating',
query: {
'id': 1,
'name': 2
}
});
问题十
：后端给了一个导出xsl的接口，前端调了之后，需要做什么特殊的操作吗，还是只是调接口？
解决
//问题1:导出不调接口：解决：因为一直从缓存中获取了。传参时加个时间戳
//问题2: 导出的字节流，如果能转换成json对象，那么它里面会包含msg或者status一些错误信息的提示
// 如果不能转换成json对象，那就是可以成功的转化成文件的形式
// 解决：
if (status === 200) {
// 导出
let blob = new Blob([response.data], {type: "application/vnd.ms-excel"});
//做一个副本
let blob1 = new Blob([response.data], {type: "application/vnd.ms-excel"});
//转成text
var reader = new FileReader();
reader.readAsText(blob, 'utf-8');
reader.onload = function (e) {
try {
const data = JSON.parse(reader.result); // try捕获一下是否能转换成json对象，如果可以取出msg，弹出信息。
message.error(data.msg);
} catch (e) {
// 如果不可以，说明可以转换成文件直接导出文件就行
let objectUrl = URL.createObjectURL(blob1);
// 文件名字
let fileName = response.headers['content-disposition'].split(';')[1].split('=')[1];
// 文件地址
const link = document.createElement('a');
link.download = fileName;
link.href = objectUrl;
link.click()
message.success('导出成功');
}
}
}else {
message.error('导出失败');
}
// 导出
exportExcel() {
return axios({
method: method,
url: url,
data: data,
responseType: 'blob'
}).then(response => {
const { status, msg } = response;
if (status === 200) {
// 导出
let blob = new Blob([response.data], {type: "application/vnd.ms-excel"});
let objectUrl = URL.createObjectURL(blob);
// 有名字的导出
//let fileName = response.headers['content-disposition'].split(';')[1].split('=')[1];
let fileName = "测试.xls"
// 文件地址
const link = document.createElement('a')
link.download = fileName
link.href = objectUrl
link.click()
message.success('导出成功');
} else {
message.error('导出失败');
}
});.catch(data => {
console.log('导出失败');
})
}
问题十一： antd的日期传值的问题，moment
// 在submit传参数时
// 参数：
start_date: start_date.format("YYYY-MM-DD"),
start_time:sampleParams.start_time.format("HH:mm:ss"),
//给默认值 在reducer中通过 moment('00:00:00', 'HH:mm:ss')
问题十二：axios的get的params和post的data的区别
知识点：
- produce
- axios
- moment
- treeselect
- cors
收获：
- 尽量不要用href，用路由跳转或者link
- 提交git时的规范： update：modify 信息 in 文件
- 编辑回填，点编辑把现在的record中的该字段通过，draft[字段]=record.字段 传过去，保存起来
847
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
