使用reactusestate鉤子將值存盤在陣列中

我有以下基于 formik 的示例，其中我正在使用 primereact 檔案上傳。每次用戶上傳檔案時， 的值selectedAssetCategoryId都是不同的。如果用戶一次上傳多個檔案，則該值將保持不變。例如，如果用戶同時上傳 3 個檔案，則 的值為selectedAssetCategoryId1。

所以我想在陣列中存盤1三次值。uploadedFileCategory

setUploadedFileCategory(uploadedFileCategory =>[...uploadedFileCategory,selectedAssetCategoryId]);插入陣列中的專案的正確方法是什么？當我將滑鼠懸停uploadedFileCategory在這一行的變數上時 const [uploadedFileCategory , setUploadedFileCategory] = useState([])，Visual Studio 代碼編輯器告訴我uploadedFileCategory is declared but its value is never read.ts(6133)

const DataRequestForm = (props) => {
    const user = JSON.parse(sessionStorage.loggedInUser)
    const {values, setFieldValue, touched, errors, isSubmitting, handleReset, handleChange} = props;
    const growl = React.createRef()
    
     const [uploadedFileCategory , setUploadedFileCategory] = useState([])

    
    
    // fileUpload function testing using new service
    const fileUpload = (e) => {
      

         //Store the values in an array.
         setUploadedFileCategory(uploadedFileCategory =>[...uploadedFileCategory,selectedAssetCategoryId]);
      
        const personnelId = JSON.parse(sessionStorage.loggedInUser).id
        let formData = new FormData();
        e.files.forEach((file, i) => formData.append(`files`, file))

        axios.post('upms/uploadAndCreateAssociations?personnelId='   personnelId  '&assetCategoryId=' selectedAssetCategoryId, formData,{
            headers: {
                "Content-Type": "multipart/form-data"
            }
        }).then((response) => {
            
            }).catch(err => console.log(err));


        }).catch((response) => {
            growlComp.show({severity: 'error', summary: 'File Upload unsuccessful', detail: 'File Upload was unsuccessful'})
            console.log('Could not upload files.....')
        })
      
    }
    

    

     
    
    

    return (
        <div>
            
            <div id="formDiv">
                <Growl ref={growl}/>
                <Form className="form-column-3">
                                         
                         
                    <div className="datarequest-form">   
                     <label style={{marginRight: '1355px',fontWeight: 'bold'}}>Document Upload</label>
                   
                    <div className="form-field">
                                <FileUpload
                                    name="files"
                                    mode='advanced'
                                    uploadHandler={fileUpload}
                                    customUpload={true}
                                    chooseLabel="Attach Files"
                                    maxFileSize="2058722381"
                                    ref={fileUploadRef}
                                    id="researcherAttachFileButton"
                                    disabled={disableButton}
                                    multiple={true}/>   
                                   
                             </div>

                       
                      
                       
                    </div>
                </Form>
            </div>
        </div>
    )

};

export const DataRequestEnhancedForm = withFormik(
    
    
    
    {

        
    mapPropsToValues: props => {

              
        
        return {
            
            uploadedFileCategory: uploadedFileCategory
            
        }
    },
    validationSchema:validationSchema,
    handleSubmit(values, {props, resetForm, setErrors, setSubmitting}) {
      
        props.handleSubmit(values)
      
        setSubmitting(false)
    },
    setFieldValue(field, value, shouldVal) {
        console.log('In setFieldValue')
    },

    displayName: 'Data Request Form',
})(DataRequestForm)

uj5u.com熱心網友回復：

讓我回答這個問題：

問題一：

setUploadedFileCategory(uploadedFileCategory =>[...uploadedFileCategory,selectedAssetCategoryId]);插入陣列中的專案的正確方法是什么？

回答 它有效，這里是示例代碼：

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [array, setArray] = useState([]);
  const changeArray = () => {
    console.log(array);
    setArray((b) => [...array, 1]);
  };
  return (
    <div className="App">
      <h1>Open console to see the logs</h1>
      <button onClick={() => changeArray()}>Example</button>
    </div>
  );
}

該鏈接當前位于：https ://byy0g5.csb.app/ 查看控制臺以查看日志。

問題2

當我將滑鼠懸停在這一行 const [uploadedFileCategory , setUploadedFileCategory] ??= useState([]) 上的變數 UploadedFileCategory 上時，Visual Studio 代碼編輯器告訴我 UploadFileCategory 已宣告，但它的值永遠不會被讀取。ts(6133)

回答 這只是意味著uploadedFileCategory沒有在代碼中的任何地方使用。

即使正確設定了值，您也需要將其正確放置在代碼中以查看值的變化。嘗試console.log(uploadedFileCategory)查看代碼的輸出。

標籤：javascript 数组 反应 反应钩子

上一篇：使用ifstatemanet避免IndexError

下一篇：JavaScript平面串列到沒有父ID的樹？