Javascript 如何在不更新列表的情况下更新映射列表中的值'；她的兄弟姐妹？

我正在使用React钩子从产品API获取数据。我有以下4列：项目、数量、单价和小计。小计是数量和单价的总和。我希望在这种情况下，如果我更改数量，特定产品的小计将更新以反映更改。但是，当我尝试这样做时，所有产品的小计都会更新。更新数量的函数是

handleChange

函数

如何在不改变其他产品数量的情况下增加或减少单个产品的数量

function App() {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]);
  const [quantity, setQuantity] = useState(1)

  const [numbers] = useState([
    {label: 1, value: 1},{label: 2, value: 2},{label: 3, value: 3},{label: 4, value: 4},
  ]);

  const classes = useStyles();

  const handleChange = (e) => {
    setQuantity(e.target.value);
    console.log(e.target.value);
  }
  useEffect(() => { 
    fetch("https://fakestoreapi.com/products")
      .then(res => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setItems(result);
        },
        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      )
  }, [])

  if (error) {
    return <div>Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div>Loading...</div>;
  } else {
    return (
      <>
        <TableContainer component={Paper}>
        <Table className={classes.table} aria-label="simple table">
          <TableHead>
            <TableRow>
              <TableCell>ITEM</TableCell>
              <TableCell align="right">QUANTITY</TableCell>
              <TableCell align="right">UNIT PRICE</TableCell>
              <TableCell align="right">SUBTOTAL</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {items.map((item) => (
              <TableRow key={item.id}>
                <TableCell component="th" scope="row">
                  {item.title}
                </TableCell>
                <TableCell align="right">
                  <select onChange={handleChange}>
                    {numbers.map(number => (
                      <option
                        key={number.value}
                        value={number.value}
                      >
                        {number.label }
                      </option>
                    ))}
                  </select>
                </TableCell>
                <TableCell align="right">{item.price}</TableCell>
                <TableCell align="right">{item.price * quantity}</TableCell>
                <TableCell>
                  <button type="button">Delete</button>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    <div className={classes.checkout}>Checkout</div>
    </>
    );
  }
}

export default App;

函数应用程序（）{
const[error，setError]=useState（null）；
const[isLoaded，setIsLoaded]=useState（false）；
const[items，setItems]=useState（[]）；
常量[数量，设置数量]=使用状态（1）
常量[数字]=使用状态([
{label:1，value:1}，{label:2，value:2}，{label:3，value:3}，{label:4，value:4}，
]);
const classes=useStyles（）；
常数handleChange=（e）=>{
设定数量（如目标值）；
console.log（如target.value）；
}
useffect（（）=>{
取回（“https://fakestoreapi.com/products")
.then（res=>res.json（））
.那么(
（结果）=>{
setIsLoaded（真）；
设置项目（结果）；
},
（错误）=>{
setIsLoaded（真）；
设置错误（错误）；
}
)
}, [])
如果（错误）{
返回错误：{Error.message}；
}否则，如果（！已加载）{
返回装载。。。；
}否则{
返回(
项目
量
单价
小计
{items.map（（item）=>(
{item.title}
{numbers.map（number=>(
{number.label}
))}
{item.price}
{item.price*数量}
删除
))}
结账
);
}
}
导出默认应用程序；

向items数组中的每个项目添加quantity属性

  useEffect(() => { 
    fetch("https://fakestoreapi.com/products")
      .then(res => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          let updatedItems = result.map((item) => {
              item["quantity"] = 0;
              return item;
          });
          setItems(updatedItems);
        },
        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      )
  }, [])

修改handleChange函数，将条目id作为第二个参数

<select onChange={(e) => handleChange(e,item.id)}>

正确地将价格和数量相乘

<TableCell align="right">{item.price * item.quantity}</TableCell>

{item.price*item.quantity}

看起来您的数量挂钩是数字类型，并且您正在将该数字应用于每一行。相反，您可以做的是当您从api收到结果时，映射项目数组并将quantity属性添加到每个项目。好的。现在让我试试，我现在就这么做了。quantity属性会根据需要进行更新，但仍会影响所有产品的小计。我希望它只更新一个产品的小计。见下面的答案。应该是所有的改变，你需要让它工作。它正是我想要的。谢谢。

<TableCell align="right">{item.price * item.quantity}</TableCell>