React Hooks 问题 - useState 更新不渲染组件

作者: Anoyi

2021-01-07 17:37

示例问题

描述: 初始化渲染列表,点击按钮向列表中添加数据。
实际效果:页面上的列表并未更新。

import {List, Button} from 'antd';
import React, {useState, useEffect} from 'react';

const data = ['Anoyi', 'com'];

export default () => {
  const [lines, setLines] = useState<string[]>([]);
  useEffect(() => setLines(data), []);

  const addLine = () => {
    data.push('aaa');
    setLines(data);
  }

  return (
    <>
      <List bordered dataSource={lines} renderItem={item => <List.Item>{item}</List.Item>}/>
      <Button type="primary" onClick={addLine}>Add</Button>
    </>
  );

};

解决办法

setLines 赋值新的数组对象,而不是原数组对象的引用。

import {List, Button} from 'antd';
import React, {useState, useEffect} from 'react';

const data = ['Anoyi', 'com'];

export default () => {
  const [lines, setLines] = useState<string[]>([]);
  useEffect(() => setLines(data), []);

  const addLine = () => {
    data.push('aaa');
    setLines([...data]);
    // setLines(data.slice());   // 二选一
  }

  return (
    <>
      <List bordered dataSource={lines} renderItem={item => <List.Item>{item}</List.Item>}/>
      <Button type="primary" onClick={addLine}>Add</Button>
    </>
  );

};

原因分析

这个涉及到可变对象和不可变对象的知识,在 vue 和 react 中,如果更新可变对象时,可能不会引起视图更新,这是因为 vue 和 react 默认都是浅监听,内层数据发生改变,并不会监听到。

看法

看法

昵称
邮箱