javascript - How to add item to an Array Type property in React Hook State Object?

Question

Check my code below. I want to push an image file to product_images array. I tried using concat() also. 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]        <----- ??
    }
})

标签： javascriptarraysreactjsreact-hooksreact-state

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)