我在json-server中有一个产品列表（没有数量），使用react-redux获取并在table中呈现。我也有一个输入字段从用户获得数量，通过乘以产品价格（从json-server）与产品数量（从输入字段）来计算总数。
列表中显示NaN的总计字段。问题出在 qty 上。如何避免这种错误？如何将表中所有输入字段初始状态初始化为0？

import FormInput from './Components/FormInput';
import { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { fetchList } from './Components/Store/action';
function App() {

  const { list } = useSelector((state) => state.list)
  const dispatch = useDispatch()
  const [qty, setQty] = useState({})
 
  const handleChange = (e) => {
    e.preventDefault()
    const { name, value } = e.target;
    setQty({
      ...qty,
      [name]:value 
    });
  }

  useEffect(() => {
    dispatch(fetchList())
  }, [dispatch])

  let sum = 0

  list.forEach((item) => {
    sum += item.price * qty[item.name]
  })

  const submitHandler = (e) => {
    e.preventDefault()
  }

  return (
    <div >
      <form onSubmit={submitHandler}>
        <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>
                <td>{item.price * qty[item.name]}</td>
              </tr>
            ))}
          </tbody>
        </table>
        <button type='submit'>Submit</button>
      </form>
      <h1>total:{sum}</h1>
    </div>
  );
}

export default App;

我尝试设置初始状态为数量。我希望所有输入字段都是数字0，而不是字符串或未定义