Question

我对React钩子很新鲜，我正在尝试制作一个简单的购物车页面（如附件https://i.stack.imgur.com/lgjcY.jpg所示），但不幸的是，增加和删除按钮不会正确影响渲染（执行usestate，但是渲染更改落后一步，有一个滞后），这是我的代码有问题吗，尤其是usestate挂钩

data.forEach(e => {
    const tempIndex = tmp.findIndex(el => el.prov === e.prov);
    if (tempIndex) {
        tmp[tempIndex].dataPoints.push({ x: e.datax, y: e.datay });
    } else {
        tmp.push({
            type: "firstid",
            prov: e.prov,
            name: e.pname,
            showInLegend: false,
            dataPoints: [{ x: e.datax, y: e.datay }],
        })
    }
});

Answer 1

仅当先前状态与先前状态不相等（浅比较）时，组件才会呈现。

const handleDelete = e => {
  const i = e.target.id;
  values.splice(i, 1);
  setValue([...values]);
}

来自useState docs：

如果您的更新函数返回的值完全相同，则随后的重新渲染将被完全跳过。

使用#Array.splice()：

values.splice(i, 1);
prevValues === values; // Always true

Answer 2

始终返回新值，并且不变异对象|数组
尝试使用useCallback以避免不必要的编译。

import React, {useState, useEffect} from 'react';
import {render} from '@testing-library/react';

const Buttons = () => {
  const [values, setValue] = useState([{value: 0}, {value: 2}, {value: 4}]);

  const getStyle = useCallback((value) => `badge badge-${value === 0 ? 'warning' : 'primary'}`}, []);

  const handleAdd = useCallback((e) => {
    const i = (e.target.id);
    setValue((current) => current.map((c, index) => index === i ? {value: c.value + 1} : c));
  }, []);

  const handleDelete = useCallback((e) => {
    const i = e.target.id;
    setValue((current) => current.filter((c, index) => index !== i));
  }, []);

  const handleAddItem = useCallback(() => {
    setValue((current) => [...current, {value: 0}]);
  }, []);

  return (
    <div>
      <ul>
        {values.map((value, i) =>
          <li key={i} style={{listStyle: 'none'}}>
            <span className={getStyle(value.value)}>{value.value}</span>
            <button className="btn btn-primary m-2" id={i} onClick={handleAdd}>+</button>
            <button
              className="btn btn-success m-2" onClick={handleAdd}>-
            </button>
            <button className="btn btn-danger m-2" id={i} onClick={handleDelete}>Del</button>
          </li>)}
      </ul>
      <button className="btn-btn-primary" onClick={handleAddItem}>Add Item</button>
    </div>
  );
};

export default Buttons;

为什么渲染延迟

2 个答案: