如何将输入值与从 api 提取数据的 .map 函数匹配

Question

我有一个 .map 函数显示从 api 中提取的数据，我想在数据中添加一个字段并使其与相关数据相匹配。

例如，我从一个包含数量的 api 中提取成分，我想添加一个输入字段，允许我添加一个乘数，以后可以用来乘以成分。

这里是 .map 函数：

 <div className="mt-4 border-t border-b border-gray-200 divide-y divide-gray-200">
              {data.ingredients.map((ingredient) => (
                <div
                  key={ingredient.id}
                  className="relative flex items-start py-4"
                >
                  <div className="ml-4 flex items-center h-5">
                    <input
                      onChange={selectIngredient(ingredient.id)}
                      value={selectedIngredients.indexOf(ingredient.id === -1)}
                      type="checkbox"
                      className="focus:ring-purple-500 h-4 w-4 text-purple-600 border-gray-300 rounded"
                    />
                  </div>

                  <div className="ml-3 text-sm">
                    <label
                      className="font-medium text-gray-700 select-none"
                    >
                      {ingredient.name}
                    </label>
                  </div>
                  <div className="ml-3 text-sm">
                  // Here I am using useState to set a multiplier, but it sets the same vale for all data in the .map list.
                    <input
                      value={multiplier}
                      onChange={(e) => setMultiplier(e.target.value)}
                      type="number"
                      className="flex-1 focus:ring-purple-500 focus:border-purple-500 block w-full min-w-0 rounded-md sm:text-sm border-gray-300"
                    />
                  </div>
                </div>
              ))}
            </div>

成分对象如下所示：

ingredient: {
id: 1,
name: sugar,
quantity: 100,
quantityUnit: grams,
}

有没有办法设置与相关映射数据相关联的状态？

Answer 1

在您的组件中，创建一个新状态。我们称其为具有setIngredients 调度程序的ingredients 状态。默认设置为空数组。

const [ingredients, setIngredients] = useState([]);

使用useEffect 钩子，使用.map() 方法循环接收到的数据，并从添加了multiply 属性的每个成分返回一个新对象。使用这个新的对象数组更新 ingredients 状态。

useEffect(() => {
  if (data.length) {
    setIngredients(
      data.map(ingredient => ({
        ...ingredient,
        multiply: 1
      })
    );
  }
}, [data]);

现在您的ingredients 状态包含所有成分以及每种成分的multiply 属性。

为了确定，我添加了这段（伪）代码来演示解决方案应该如何工作。

现在每种成分都有一个multiply 属性，默认设置为1。在您的表单中添加一个处理乘法值的新输入。用户可以使用输入来改变乘法。

如果需要，您还可以添加隐藏输入来跟踪成分的总数量（数量 * 相乘）。这在您提交表单时可能会派上用场。

const handleMultiplyChange = (event, id) => {
  const value = Number(event.value)
  const updatedIngredients = ingredients.map(ingredient => ({
    ...ingredient,
    multiply: ingredient.id === id ? value : ingredient.multiply
  }));

  setIngredients(updatedIngredients);
};

return (ingredients.map(ingredient => (
  <>
    <input 
      type="checkbox"
      name="ingredient"
      value={ingredient.id}
    />
    <input 
      type="number" 
      name="multiply"
      min="1"
      value={ingredient.multiply}
      onChange={(event) => handleMultiplyChange(event, ingredient.id)}
    />
    <input 
      type="hidden"
      name="totalQuantity"
      value={(ingredient.multiply * ingredient.quantity)}
    />
  </>
));