react笔记（问题记录）

======================
console报错Objects are not valid as a React child (found: object with keys {..}).
标签里顶多能直接放数组（进行显示），不可以直接放对象，要转换成string或者数组或者循环把元素显示出来

======================
eslint class-methods-use-this规则
class类里的render方法里必须有this.

======================
react获得input输入值
https://www.html.cn/qa/react/16946.html
写法https://blog.csdn.net/GuanJdoJ/article/details/83375570

const Todo = ({ onClick, complete, text, ...props }) => (
  <li
    onClick={onClick}
    style={{textDecoration: complete ? "line-through" : "none"}}
    {...props}
  >
    {props.text}
  </li>
)

参考链接：https://juejin.im/post/5b5096b66fb9a04f85534ebc

useState hook 原文
背景：在复制antd官网代码的时候，组件都是函数式的写法，本人想将其改写成class类型组件，遇到一直报错说不可以使用useState。但是函数式的写法式本来说不支持状态修改的，useState hook是专门用来解决这个问题的，它可以帮助添加函数式的组件的状态。
至于class类型的组件修改，直接操作this.state就可以

getFieldDecorator用法（一）——登录表单

别人antd组件使用的坑

修改state

state类型为不可变类型（number，string，bool，bull,undefined），直接赋值修改
state类型为数组，this.setState(preState=>books:[...preState,''React Guide]) （注：得使用返回新数组的数组方法，或者新建一个数组赋值，直接改没用）
state类型为对象，this.setState(preState=>{
owner:{...preState.owner,name:'Jason'}
})
（有关preState的说明）
连续setState是不行的，因为会合并setState操作参考，要想达到修改，需要使用preState作为参数来在前一个状态的基础上setState

参考
https://blog.csdn.net/weixin_39939012/article/details/80876022

=========================
获得每一行record的key值
正确写法：

render: (_: any, record: any) => (
          <div>
            <Button type="link" onClick={() => this.props.handleEdit(record)}>编辑{record.key}</Button>
            <Button type="link" onClick={() => this.props.handleAdd()}>添加</Button>
          </div>
        ),

错误写法

render: (record: any) => (
          <div>
            <Button type="link" onClick={() => this.props.handleEdit(record)}>编辑{record.key}</Button>
            <Button type="link" onClick={() => this.props.handleAdd()}>添加</Button>
          </div>
        ),

========================
在useEffect里调用setState
原写法：（警告：会无限渲染，提示将form和stageInfo，作为useEffect的第二个参数）
useEffect(() => {
if (stageInfo !== undefined) {
form.setFieldsValue({ name: stageInfo.name })
setCmdData(stageInfo.commands)
}
},[form,stageInfo]);
正确写法（无警告）
useEffect(() => {
if (stageInfo !== undefined) {
form.setFieldsValue({ name: stageInfo.name })
setCmdData(stageInfo.commands)
}
},[form,stageInfo]);

==================================
子组件传给父组件的值不一样，onsubmit data和vv after set里的不一样，现象就是要setstate是上一次的setstate（PS：state要改两次就是数组对象这种一般都是没有真正setstate成功。。。。）
父组件
fileSubmit = (vals: IFiles[]) => {
console.log("onsubmit data:", vals)
this.setState({ vv: { ...this.state.vv, files: vals } })
console.log("vv after set",this.state.vv.files)
this.onSubmit()
}
子组件
问题写法：
onSave = (record: IFiles) => {
this.props.onSubmit(this.state.files)
this.setState({ currentEditRow: -1 });
}
正确写法：
onSave = (record: IFiles) => {
this.checkForm().then((resolve) => {
this.props.onSubmit(resolve)
})
// 使用用promise之后，数据一致，不然都是不完整的残缺数据
this.setState({ currentEditRow: -1 });
}

====================================
子组件修改state不成功，又是console的出来，没有真正修改造成重新渲染
错误做法：使用splice
const nlist = [...this.state.files]
nlist.splice(record.key, 1)
for (let i = 0; i < nlist.length; i++) {
if (i >= record.key) {
nlist[i].key -= 1
}
}
this.setState({ files: nlist })
正确做法：复制一个空数组将元素每个push进去

类似：没有真正删除
错误：
let formData = this.state.stages
this.setState({ stages: formData.filter((item: IStages) => item.key !== row) })
}
正确：
let form = this.state.ss
form.splice(row, 1)
let newForm = []
for (let index = 0; index < form.length; index++) {
const element = form[index];
element.key = index
newForm.push(element)
}
this.setState({ ss: [...newForm] });

====================================
错误做法：父组件异步获得的值，props传给子组件，props给子组件state赋初值，子组件用state数据显示为空
原因：在子组件挂载时，父组件还没有拿到数据，props在赋值给state时还是空的，于是没有