如何将图像和价格添加到对象数组中答案

【问题标题】：How to add images and price to an array of objects react如何将图像和价格添加到对象数组中
【发布时间】：2022-06-24 23:00:43
【问题描述】：

我想在输入价格或从文本字段上传图片时将图片和价格添加到对象数组中

const [sampleArray, setSampleArray] = useState[{image:'', price:''}]
const handleSubmit=(e)=>
{

}

result should be like this:
[{image:'apple.jpeg', price:100}, {image:'orange.jpeg', price:200}
]

第一个输入字段的价格为 100，第二个输入字段有苹果图像，第三个输入字段的价格为 200，第四个输入字段有橙色图像，

<form onSubmit={handleSubmit}
  <input type='text'  />
  < input type='file'  />
  <input type='text'/>
  < input type='file'  />
  <button type='submit'>Submit</button>
</form>

【问题讨论】：

你的handleChange是什么样的？请提供minimal reproducible example。
我们能提供什么帮助？很遗憾，您提供的内容并不能说明您遇到的任何问题。
请立即查看
在提交时您想将数据推送到setSampleArray 对吗？

标签： javascript reactjs

【解决方案1】：

您不能将数据推送到数组中。试试下面的代码提交数据，你会得到数据数组！

import React, { useEffect, useState } from "react";
let sampleArray = [];

function App() {
  const [price, setPrice] = useState([]);
  const [image, setImage] = useState([]);

  function handleBtnclick() {
    setPrice('');
    setImage('');
    sampleArray.push({
      price: price,
      image: image
    });

    console.log(sampleArray, 'obj');
  }

  return (
    <div>
      <input type='text' value={price} onChange={(e) => setPrice(e.target.value)} />
      <input type='file' onChange={(e) => setImage(e.target.files[0])} />
      <input type='button' value='submit' onClick={() => handleBtnclick()} />
    </div>
  );
}
export default App;

【讨论】：

【解决方案2】：

//Array deceleration with image imported form assets folder

import Group609 from "../../../../assets/images/Group609.png";
import credibleandtrust from "../../../../assets/images/credibleandtrust.svg";
import support_24_7 from "../../../../assets/images/support_24_7.svg";
import refundpolicy from "../../../../assets/images/refundpolicy.svg";
 
let arr = [
  {
    id: 1,
    img: Group609,
    h5a: "Instant And Fast",
    h5b: "Delivery",
    text: "We value the requirements of our customers and provide followers.",
  },
  {
    id: 2,
    img: credibleandtrust,
    h5a: "Lorem Ispum",
    h5b: "Delivery",
    text: "We value the requirements of our customers and provide followers",
  },
  {
    id: 3,
    img: fastdelivery,
    h5a: "Demo",
    h5b: "",
    text: "We value the requirements of our customers and provide followers.",
  },
  {
    id: 4,
    img: support_24_7,
    h5a: "Demo1",
    h5b: "",
    text: "We value the requirements of our customers and provide followers.",
  },
  {
    id: 5,
    img: refundpolicy,
    h5a: "Demo2",
    h5b: "",
    text: "We value the requirements of our customers and provide followers.",
  },
];

// Getting Id from children component and comparing it with array Id

const [id, getId] = useState("");
  const getFeatureSecLId = (dataVar1) => {
    getId(dataVar1);
  };
  let getFilteredRecord = arr.filter((filterVal) => {
    return filterVal.id === id;
  });

// After comparison passing the filtered value to other children component using //map method

{getFilteredRecord.map((var1) => {
              return <FeatureSectionRight dataValues={var1} />;
            })} 


// After passing values, displaying the values in the children component

<div className="col-lg-6 col-md-6 col-sm-12 core-features-content">
      <div className="row core-content core-features-003 active">
        <div className="row">
          <div className="col-lg-1 col-md-1 col-sm-1"></div>
          <div className="col-lg-10 col-md-10 col-sm-10">
            <div className="row uk-flex">
              <div className="col-lg-2 col-md-2 col-sm-3">
                <img src={dataValues.img} />
              </div>
              <div className="col-lg-10 col-md-10 col-sm-9">
                <h5>
                  {dataValues.h5a} <br />
                  {dataValues.h5b}
                </h5>
              </div>
            </div>
            <div className="row">
              <p>{dataValues.text}</p>
            </div>
          </div>
          <div className="col-lg-1 col-md-1 col-sm-1"></div>
        </div>
      </div>
    </div>

【讨论】：