GY-L

React常见问题

复杂数据的更新

很多时候我们某个state数据不是简单数据类型(值类型)，而是数组、对象之类(引用类型)。而React组件的更新机制对state只进行浅对比，也就是更新某个复杂类型数据时只要它的引用地址没变，那就不会重新渲染组件。 常用的函数式更新

const [state, setState] = useState({});
setState(prevState => {
  // 也可以使用 Object.assign
  return {...prevState, ...updatedValues};
});
1
2
3
4
5

深拷贝对象，用全新的副本更新数据。

const _ = require('lodash');
let arr = [{ name: 'Anna', age: 16 }, { name: 'James', age: 18 }]
// 方法一
let arr1 = arr.map(o => Object.assign({}, o));
// 方法二
let arr2 = arr.map(o => ({...o}));
// 方法三（推荐）
let arr3 = _.cloneDeep(arr);
1
2
3
4
5
6
7
8

数组的更新

对于数组的更新，日常的使用函数式更新即可实现，

 const [todos, setTodos] = useState([{ text: "react" }]);
 const addItems = () => {
    setTodos(()=>return[
      ...todos,
      {
        text: "hooks"
      }
    ]);
  };
1
2
3
4
5
6
7
8
9

但在某次做文件夹遍历文件上传过程中遇到过一个问题，初步分析useState是异步的不会合并state的值原因导致，即使结合useEffect也不能得到实际的更新结果。 最终是在更新state前对state做了push才得到了合并的state

loadFileList.push({
    name: fileName,
    url: `${CDN}${res.url}`,
    uid: file.file.uid,
})
setLoadFileList([...loadFileList]);
1
2
3
4
5
6