如何在Reactjs中的环数组中创建唯一的输入字段值？

Question

我试图在React中更新特定的inputfield / selectfield值。这是我的代码：

import React, {useState} from 'react'






  const FoodScreen = () => {
    const [qty, setQty] = useState(0)

      return (
        <div className='row gy-2'>
          {filteredProducts &&
            filteredProducts.map((product) => (
              <div key={product._id} className='col-lg-3 col-md-4 col-sm-6 col-12'>
                <div className='card icon-card'>
                  <div className='card-body'>
                    <div className='card-title text-center'>{product.name}</div>
                    <div className='card-text text-center'>
                      <div className='btn-group'>
                        <span
                          className='p-1 rounded-pill shadow-none'
                          style={{ color: '#f46c2d' }}
                        >
                          ${product.price}
                        </span>
    
                        <select
                          className='btn border-1 border-success btn-sm shadow-none mx-1'
                          name='qty'
                          value={qty}
                          onChange={(e) => setQty(e.target.value)}
                        >
                          <option value='0' disabled='disabled'>
                            QTY
                          </option>
                          {[...Array(10).keys()].map((x) => (
                            <option key={x + 1} value={x + 1}>
                              {x + 1}
                            </option>
                          ))}
                        </select>
    
                        <FaMinus
                          className='bg-dark p-2 text-light fs-3 rounded-pill mx-1'
                          style={{ cursor: 'pointer' }}
                          onClick={() => removeFromCurrentHandler(product)}
                        />
                        <FaPlus
                          onClick={() => addToCartHandler(product)}
                          className='bg-dark p-2 text-light fs-3 rounded-pill mx-1'
                          style={{ cursor: 'pointer' }}
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
        </div>
      )
    }
    
    export default FoodScreen

我现在遇到的问题是，如果更改一个selectfield / input字段的值，另一个循环的选择字段的值正在更改，因为ara使用的是value={qty}。我该怎么做。我没有任何概念。

这就是造成重复的原因。

name='qty'
value={qty}
onChange={(e) => setQty(e.target.value)}

Answer 1

使用键作为地图的索引，以便在编辑时使用特定的索引。

filteredProducts &&
        filteredProducts.map((product, index) => (
          <div key={index} className='col-lg-3 col-md-4 col-sm-6 col-12'>