ReactJS输入读取与计算问题及Axios PUT更新需求求助

你的代码出现总价NaN的问题源于几个关键错误，以下是修正方案并补充PUT更新功能：

核心错误分析 #

• qty状态类型混乱：初始设为数字0，但后续想存储多个商品的数量（应为对象结构），导致计算时item.price * qty变成数字乘对象，直接返回NaN。
• handleChange取值错误：输入框的值存在e.target.value而非e.target.qty，且输入内容是字符串，需转为数字才能参与计算。
• 总价计算逻辑错误：每个商品的数量需从qty[item.name]中获取，不能直接用整个qty对象相乘；同时要处理未输入时的默认值，避免undefined乘数字得NaN。

修正后的App组件代码 #

import './App.css';
import FormInput from './Components/FormInput';
import axios from 'axios'
import { useEffect, useState } from 'react'

function App() {
  const [list, setList] = useState([])
  // 初始设为空对象，存储每个商品的数量：{商品名: 数量}
  const [qty, setQty] = useState({})

  const fetchItems = async () => {
    const res = await axios.get("http://localhost:8000/items")
    setList(res.data)
    // 从接口数据初始化每个商品的数量为0
    const initialQty = res.data.reduce((acc, item) => {
      acc[item.name] = 0
      return acc
    }, {})
    setQty(initialQty)
  }

  useEffect(() => {
    fetchItems()
  }, [])

  const handleChange = (e) => {
    // 把输入值转成数字，空值设为0避免NaN
    const value = e.target.value ? Number(e.target.value) : 0
    setQty(prev => ({
      ...prev,
      [e.target.name]: value
    }))
  }

  // 添加PUT更新函数，可根据需求选择触发时机（实时更新/按钮触发）
  const updateItemQty = async (itemId, newQty) => {
    try {
      await axios.put(`http://localhost:8000/items/${itemId}`, {
        qty: newQty // 需根据后端接受的字段名调整
      })
      // 更新成功后重新拉取数据，或直接修改本地状态
      fetchItems()
    } catch (error) {
      console.error('更新商品数量失败:', error)
    }
  }

  // 若需要实时更新，可修改handleChange：
  // const handleChange = (e) => {
  //   const value = e.target.value ? Number(e.target.value) : 0
  //   const itemName = e.target.name
  //   const targetItem = list.find(item => item.name === itemName)
  //   setQty(prev => ({ ...prev, [itemName]: value }))
  //   if (targetItem) updateItemQty(targetItem.id, value)
  // }

  return (
    <div>
      <form>
        <table>
          <thead>
            <tr>
              <th>S.no</th>
              <th>Name</th>
              <th>Unit</th>
              <th>price</th>
              <th>Quantity</th>
              <th>total</th>
            </tr>
          </thead>
          <tbody>
            {list.map((item) => (
              <tr key={item.id}>
                <td>{item.id}</td>
                <td>{item.name}</td>
                <td>{item.unit}</td>
                <td>{item.price}</td>
                <td>
                  <FormInput 
                    type="number" 
                    name={item.name} 
                    handleChange={handleChange} 
                    value={qty[item.name]} 
                  />
                </td>
                {/* 取对应商品的数量，默认0确保计算正常 */}
                <td>{item.price * (qty[item.name] || 0)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </form>
    </div>
  );
}

export default App;

修正后的FormInput组件代码 #

const FormInput = ({name, value, handleChange, type}) => {
  return (
    <div>
      <input
        type={type}
        onChange={handleChange}
        value={value}
        name={name}
        min="0" // 禁止输入负数
      />
    </div>
  )
}
export default FormInput

关键修改说明 #

1. qty状态优化：改为对象结构，用接口数据初始化每个商品的数量为0，确保每个商品都有对应数量值。
2. 输入值处理：将输入的字符串转为数字，空值设为0，避免计算时出现NaN。
3. 总价计算：用qty[item.name] || 0兜底，确保未输入数量时用0参与计算。
4. PUT更新功能：新增updateItemQty函数，可选择实时触发（修改handleChange）或通过按钮批量触发，适配不同业务需求。
5. 输入框限制：添加min="0"防止用户输入负数数量。

内容的提问来源于stack exchange，提问作者Trunks