如何將項目添加到 React Hook State Object 中的數組類型屬性？

Question

在下面檢查我的代碼。 我想將圖像文件推送到 product_images 數組。 我也嘗試使用concat() 。 但不起作用。

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]        <----- ??
    }
})

Answer 1

什么是聯系（）？
如果您在 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;

你也可以做 vendorData.data.product_images.push(image)