为什么渲染延迟

Question

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

import React, { Component ,useContext,useState,useEffect} from 'react';
import { statesContext,iContext } from './Home';
import { render } from '@testing-library/react';

const Buttons = () => {

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

let getStyle=(value)=>{
    var styles="badge badge-";
    var color= (value===0)? "warning":"primary";
    styles+=color;
     return styles;
 }

const handleAdd=(e)=>{
    var i=(e.target.id);
     var count=values
     count[i].value+=1;
     setValue(count);

  }


 const handleMinus=(e)=>{
  }
  const handleDelete=(e)=>{
      var i=e.target.id
      values.splice(i,1);
      setValue(values);
   }
 const handleAddItem=()=>{
      setValue([...values,{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;

我对React钩子不屑一顾，我正在尝试制作一个简单的购物车页面（如附件https://i.stack.imgur.com/lgjcY.jpg），但不幸的是，增加和删除按钮不会影响渲染...

Answer 1