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

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

如何在React Hook状态对象的Array Type属性中添加项目？

1 个答案: