मैं एक मूल प्रतिक्रिया परियोजना पर काम कर रहा हूं, जहां मेरे पास वस्तु और सरणी के साथ प्रतिक्रिया स्थिति है, मैं यहां क्या करने की कोशिश कर रहा हूं, मैं वस्तु को images सरणी में धक्का देना चाहता हूं, और मैं प्रस्तुत करना चाहता हूं कि घटक में, अब तक मैंने चीजों को गुगल किया है मुझे इसे करने के लिए कुछ तरीके मिले array.concat और array.push, मैंने दोनों तरीकों की कोशिश की, यह राज्य को अपडेट कर रहा है लेकिन यह घटक पर प्रभाव नहीं डाल रहा

यहाँ नीचे वह कोड है जिसकी मैंने कोशिश की थी

const [proClrData, setProClrData] = useState([
  { color: "black", price: "", qty: "", images: [] },
  { color: "white", price: "", qty: "", images: [] },
  { color: "red", price: "", qty: "", images: [] }
]);
const addImages = (key) => {
  var obj = { src: "", imgdata: "" };
  proClrData[key].images = proClrData[key].images.concat(obj);
  console.log(proClrData);
 };

नीचे घटक कोड है

 {proClrData.length >= 1 &&
    proClrData?.map((clr, key) => {
      return (
        <div key={key}>
          <p className="pt-3 ">{clr.color}</p>
          <div className="form-group">
            <input
              label="Price"
              name="price"
              value={clr?.price}
              type="number"
              fullWidth
              required
            />
          </div>
          <div className="form-group pt-3">
            <input
              label="Quantity"
              name="qty"
              value={clr?.qty}
              type="number"
              fullWidth
              required
            />
          </div>
          <div className="text-end pt-3">
            <button
              variant="contained"
              color="primary"
              onClick={() => addImages(key)}
            >
              Add Images
            </button>
          </div>
          {clr?.images?.map((img, imgkey) => {
            return (
              <div className="form-group pt-3" key={imgkey}>
                <input
                  label="Image"
                  name="images"
                  value=""
                  accept="image/*"
                  type="file"
                  fullWidth
                  required
                />
              </div>
            );
          })}
        </div>
      );
    })}

यहां कार्य कोड का codeSandbox है।

1
CodeBug 9 जुलाई 2021, 10:02

3 जवाब

आपको तदनुसार proClrData को संशोधित करना चाहिए और पुन: प्रस्तुत करने के लिए setProClrData का उपयोग करना चाहिए।

दस्तावेज़ देखें: https://reactjs.org/docs/hooks-state.html

0
Charlie Araya 9 जुलाई 2021, 07:06

आप सीधे राज्य को अपडेट करें

इसके लिए फ़ंक्शन का उपयोग करें:

setProClrData(prev => prev.push() // or concat)
0
Deep1man3 9 जुलाई 2021, 07:06

आपको राज्य को अपडेट करने के लिए setProClrData फ़ंक्शन को कॉल करना होगा।

याद रखें कि आपको राज्य को बदलना नहीं चाहिए, इसके बजाय आपको एक नया संदर्भ (आपके मामले में एक नया सरणी) प्रदान करना होगा और अपडेटर फ़ंक्शन को कॉल करना होगा, अन्यथा रिएक्ट को पता नहीं होगा कि घटक को फिर से प्रस्तुत करना चाहिए।

const [proClrData, setProClrData] = useState([
  { color: "black", price: "", qty: "", images: [] },
  { color: "white", price: "", qty: "", images: [] },
  { color: "red", price: "", qty: "", images: [] }
]);

const addImages = (key) => {
  const img = { src: "", imgdata: "" };
  const newProClrData = proClrData.map((obj, index) => {
    return index !== key ? data : { ...obj, images: [...data.images, img] };
  });
  setProClrData(newProClrData);
 };

0
Olivier Boissé 9 जुलाई 2021, 07:17