[英]How to add item to an Array Type property in React Hook State Object?
Check my code below.在下面检查我的代码。 I want to push an image file to product_images array.
我想将图像文件推送到 product_images 数组。 I tried using
concat()
also.我也尝试使用
concat()
。 But doesn't work.但不起作用。
const INITIAL_VENDOR_DATA = {
store_name: "",
store_contact_number: "",
website_url:"",
email:"",
city:"",
country:"",
fb_url: "",
categories:[],
product_images:[], <--------------- Array
store_type:"",
cp_name: "",
cp_contact_number: ""
}
const[vendorData,setVendorData] = useState({data: INITIAL_VENDOR_DATA}) //initializing
//Doesn't add the image to product_images array . here image is just a Image File
setVendorData({
data:{
...vendorData.data,
product_images:[...vendorData.data.product_images,image] <----- ??
}
})
What is contact()?什么是联系()?
If you use the above in the proper context of a reactjs app it will work.如果您在 reactjs 应用程序的适当上下文中使用上述内容,它将起作用。
import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
const INITIAL_VENDOR_DATA = {
store_name: "",
store_contact_number: "",
website_url:"",
email:"",
city:"",
country:"",
fb_url: "",
categories:[],
product_images:[],
store_type:"",
cp_name: "",
cp_contact_number: ""
}
function App() {
const[vendorData,setVendorData] = useState({data: INITIAL_VENDOR_DATA}) //initializing
const image = "mypic.jpg";
//Put the setVendorData in a click handler or on mount useEffect
const handleClick = () =>{
console.log('Inspect this and see it works', vendorData);
setVendorData({
data:{
...vendorData.data,
product_images:[...vendorData.data.product_images,image]
}
})
}
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
<button onClick={handleClick}>Add Image</button>
</p>
<p style={{color: '#fff'}}>
{vendorData.data.product_images && vendorData.data.product_images.map( (image) => image + '\n')}
</p>
</header>
</div>
);
}
export default App;
You can also do vendorData.data.product_images.push(image)你也可以做 vendorData.data.product_images.push(image)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.