型別錯誤：inputList不可迭代

我正在嘗試在我的專案中添加動態輸入欄位，但出現此錯誤，我在物件資料結構中使用陣列。

我不太確定接下來要做什么，因為我的選擇用完了，而且我是 React js 的新手。如果我能得到一些幫助，那就太好了。

這些是我的狀態

const [inputList, setInputList] = useState({
product_docket: '',
product_mix: [{ product: '', contains_percentage: '', quantity: '' }],

這些是我出錯的地方

const handleChange = (e, index) => {
const { name, value } = e.target
const list = [...inputList]
list[index][name] = value
setInputList(list)


const handleAddInput = (e) => {
e.preventDefault()
setInputList([
  ...inputList,
  { product_mix: [{ product: '', contains_percentage: '', quantity: '' }] },
])

這里地圖回傳

 {inputList.product_mix.map((items, i) => {
              return (
                <>
                  <div key={i} className="row">
                    <div className="col-lg-4 mb-2">
                      <div className="form-group">
                        <label className="pb-2">
                          Products <span className="text-danger">*</span>{' '}
                        </label>
                        <div className="d-flex d-inline">
                          <CFormSelect
                            aria-label="Default select example"
                            name="product"
                            onChange={(e) => handleChange(e, i)}
                            value={items.product}
                          >
                            <option selected="selected">Customer 1</option>
                            <option>Customer 2</option>
                            <option>Customer 3</option>
                          </CFormSelect>
                        </div>
                      </div>
                    </div>

                    <div className="col-lg-3 mb-2">
                      <div className="form-group">
                        <label className="pb-2">
                          % Containing <span className="text-danger">*</span>{' '}
                        </label>
                        <input
                          className="form-control"
                          type="text"
                          name="contains_percentage"
                          onChange={(e) => handleChange(e, i)}
                          value={items.contains_percentage}
                          placeholder="%"
                        />
                        <span className="text-danger"></span>
                      </div>
                    </div>

                    <div className="col-lg-3 mb-2">
                      <div className="form-group">
                        <label className="pb-2">
                          Quantity Used <span className="text-danger">*</span>{' '}
                        </label>
                        <input
                          className="form-control"
                          type="text"
                          name="quantity"
                          onChange={(e) => handleChange(e, i)}
                          value={items.quantity}
                          placeholder="Containing %"
                        />
                        <span className="text-danger"></span>
                      </div>
                    </div>

                    <div className="col-lg-2 mb-2 mt-4 pt-2">
                      {inputList.product_mix.length !== 1 && (
                        <button
                          className="btn btn-danger ms-2"
                          onClick={(e) => handleRemoveInput(e, i)}
                        >
                          Remove
                        </button>
                      )}
                    </div>
                  </div>
                </>
              )
            })}

uj5u.com熱心網友回復：

你的初始狀態是一個物件，

在handleChange 中，您將其設定為串列。它必須是一個物件 {...inputList}

const list = [...inputList] //<-- Changing from object to list 
list[index][name] = value
setInputList(list) //<-- Changing state from object to list

//Correct version
const handleChange = (e, index) => {
const { name, value } = e.target
const list = {...inputList} //<-- object, not array
list.product_mix[index][name] = value
setInputList(list)

然后您嘗試迭代 product_mix，但由于您沒有準確指定要迭代的陣列中的位置，它回傳一個錯誤。

在 handleAddInput 中，您再次使用陣列而不是物件

setInputList([
  ...inputList,
  { product_mix: [{ product: '', contains_percentage: '', quantity: '' }] },
] //<-- Changing state from object to list


//Correct version
setInputList({
  ...inputList,
product_mix: 
   [...inputList.product_mix, { product: '', contains_percentage: '', quantity: '' }],
})

解決方案是不要將物件更改為陣列。我不確定您究竟要添加產品做什么，因為您的 handleChange 與您的 inputList 沒有相同的內容。

標籤：反应 反应钩子

上一篇：如何通過過渡在同一位置顯示的三個文本之間交替

下一篇：呼叫函式時如何停止頁面重繪-React