reactjs 将多个对象数组合并为单一对象

dpiehjr4  于 2022-11-04  发布在  React
关注(0)|答案(2)|浏览(159)

"这是我密码"

import React, { useState } from 'react'
import DummyApp from "../../../images/dummy.png"
import Box from '@mui/material/Box'
import { Paper, Grid, FormGroup, FormControl, TextField, FormLabel, Button, Typography, Select, MenuItem } from '@mui/material'
import './appForm.css'
import { useLocation, useNavigate } from 'react-router-dom'
import AddCircleIcon from '@mui/icons-material/AddCircle';
import axios from 'axios'
const AppForm = () => {
    const [files, setFiles] = useState("");
    const [appStatus, setAppStatus] = useState("")
    const [category, setCategory] = useState("")
    const [records, setRecords] = useState([])
    const [inputList, setInputList] = useState([{ field: "", value: "" }]);
    const [previewImage, setPreviewImage] = useState("")

    const location = useLocation();
    const accName = location.state
    // console.log(accName);
    const handleForm = (e) => {
        const { name, value } = e.target;
        if (name === "appStatus") {
            setAppStatus(e.target.value);
        } else if (name === "category") {
            setCategory(e.target.value);
        }
        setCredentials({
            ...credentials, [name]: value
        });
    }
    const onFileUpload = (e) => {
        // console.log(e.target.files[0]);
        // setFiles(e.target.files[0]);
        // const fileReader = new FileReader();
        // fileReader.readAsDataURL(e.target.files[0]);
        // fileReader.onloadend = ({ target }) => {
        //     setPreviewImage(target.result)
        setFiles(URL.createObjectURL(e.target.files[0]));
        setPreviewImage(URL.createObjectURL(e.target.files[0]));
        // console.log(previewImage);
    }

    // console.log(previewImage)
    const image = previewImage
    const [credentials, setCredentials] = useState({
        appLogo: image,
        accName: accName,
        appName: "",
        category: "",
        packageName: "",
        appVersion: "",
        privacyPolicy: "",
        admob: "",
        playStoreLink: "",
        appStatus: "",
        appJks: "",
        Ids: []
    });
    const handleInputChange = (e, index) => {
        const { name, value } = e.target;
        const list = [...inputList];
        list[index][name] = value;
        setInputList(list);
        inputList.map(() => {

        })
    };

    // console.log(inputList);

    // handle click event of the Remove button
    const handleRemoveClick = index => {
        const list = [...inputList];
        list.splice(index, 1);
        setInputList(list);
    };

    // handle click event of the Add button
    const handleAddClick = () => {
        setInputList([...inputList, { field: "", value: "" }]);
    };
    //     event.preventDefault();
    //     let id = event.target.id;
    //     let file_reader = new FileReader();
    //     let file = event.target.files[0];
    //     file_reader.onload = () => {
    //         setFiles([...files, { file_id: id, uploaded_file: file_reader.result }]);
    //     };
    //     file_reader.readAsDataURL(file);
    //     console.log(files);
    // }
    const navigate = useNavigate()

    const statuses = [
        "Not Publish",
        "Publish",
        "Reject",
        "Remove",
        "Suspend"
    ]
    const categories = [
        "Art & Design",
        "Auto & Vehicles",
        "Beauty",
        "Books & Reference",
        "Business",
        "Comics",
        "Communication",
        "Dating",
        "Education",
        "Entertainment",
        "Events",
        "Finance",
        "Food & Drink",
        "Health & Fitness",
        "House & Home",
        "Libraries & Demo",
        "Lifestyle",
        "Maps & Navigation",
        "Medical",
        "Music & Audio",
        "News & Megazines",
        "Parenting",
        "Personalization",
        "Photography",
        "Productivity",
        "Shopping",
        "Social",
        "Sports",
        "Tools",
        "Travel & Local",
        "Video Players & Editors",
        "Weather"
    ]
    // console.log(credentials.Ids)
    const newApp = { ...credentials, id: new Date().getTime().toString() };

    const fetchData = async () => {
        try {
            const data = new FormData();
            data.append('appLogo', files);
            data.append('appJks', "JKS upload");
            // console.log(credentials)
            const res = await axios.post("http://localhost:5000/api/createApp", credentials, {
                headers: {
                    "content-type": "multipart/form-data",
                }
            });
            console.log(res);
            setRecords([...records, newApp]);
            setCredentials({
                accName: "",
                appName: "",
                category: "",
                packageName: "",
                appVersion: "",
                privacyPolicy: "",
                admob: "",
                playStoreLink: "",
                appStatus: "",
                appJks: "",
                Ids: "",
            })
            navigate('/allapps')
        } catch (error) {
            console.log(error)
        }
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        // fetchData();
        // console.log(credentials)
        // console.log(newApp)
        console.log(JSON.parse(JSON.stringify(inputList)))
        console.log(credentials.Ids);
    }

    return (
        <>
            <Paper elevation={6} sx={{ p: 4 }} >
                <Typography variant="h4" fontWeight={"600"} sx={{ my: 2 }} color="#6e83fe">Application Setup</Typography>
                <form action='' method='post' onSubmit={handleSubmit} >
                    <Box sx={{ width: "100%" }}>
                        <div style={{ width: "100%" }}>
                            <div className="preview">
                                <img src={previewImage ? previewImage : DummyApp} alt="banner" />
                            </div>
                        </div>
                        <FormGroup>
                            <FormLabel sx={{ my: 1, fontWeight: 'bold', width: "fit-content" }}>App Logo</FormLabel>
                            <label htmlFor="appLogo" className='upload-label' >
                                <TextField
                                    sx={{ display: "none" }}
                                    id="appLogo"
                                    type="file"
                                    accept=".jpg , .jpeg ,.png"
                                    onChange={onFileUpload}
                                />
                                <Button color="secondary" variant="contained frmbtn" component="span">
                                    Upload Logo
                                </Button>
                            </label>
                        </FormGroup>
                        <Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }} columns={{ xs: 2, sm: 8, md: 12 }}>
                            <Grid item xs={2} sm={8} md={6}>
                                <FormControl component="fieldset" variant="standard" fullWidth >
                                    <FormGroup >
                                        <FormLabel sx={{ my: 1, fontWeight: 'bold' }}>Account Name</FormLabel>
                                        <TextField name="accName" id="outlined-basic" disabled onChange={handleForm} type="text" variant="outlined" sx={{ fontWeight: 600 }} defaultValue={accName} size='small' />
                                    </FormGroup>
                                </FormControl>
                            </Grid>
                            <Grid item xs={2} sm={8} md={6}>
                                <FormControl component="fieldset" variant="standard" fullWidth >
                                    <FormGroup >
                                        <FormLabel sx={{ my: 1, fontWeight: 'bold' }}>App Name</FormLabel>
                                        <TextField id="outlined-basic" name="appName" onChange={handleForm} type="text" variant="outlined" size='small' />
                                    </FormGroup>
                                </FormControl>
                            </Grid>
                            <Grid item xs={2} sm={8} md={6}>
                                <FormControl component="fieldset" variant="standard" fullWidth>
                                    <FormGroup  >
                                        <FormLabel sx={{ my: 1, fontWeight: 'bold' }}>Category</FormLabel>
                                        <Select
                                            variant='outlined'
                                            labelId="demo-simple-select-autowidth-label"
                                            id="demo-simple-select-autowidth"
                                            value={category}
                                            onChange={handleForm}
                                            defaultValue="Art & Design"
                                            name="category"
                                            size="small">
                                            {categories.map((category) => (
                                                <MenuItem
                                                    key={category} name={category} value={category} >
                                                    {category}
                                                </MenuItem>
                                            ))}
                                        </Select>
                                    </FormGroup>
                                </FormControl>
                            </Grid>
                            <Grid item xs={2} sm={8} md={6}>
                                <FormControl component="fieldset" variant="standard" fullWidth >
                                    <FormGroup >
                                        <FormLabel sx={{ my: 1, fontWeight: 'bold' }}>Package Name</FormLabel>
                                        <TextField id="outlined-basic" name="packageName" onChange={handleForm} type="text" variant="outlined" size='small' />
                                    </FormGroup>
                                </FormControl>
                            </Grid>
                            <Grid item xs={2} sm={8} md={6}>
                                <FormControl component="fieldset" variant="standard" fullWidth >
                                    <FormGroup >
                                        <FormLabel sx={{ my: 1, fontWeight: 'bold' }}>App Version</FormLabel>
                                        <TextField id="outlined-basic" name="appVersion" onChange={handleForm} type="text" variant="outlined" size='small' />
                                    </FormGroup>
                                </FormControl>
                            </Grid>
                            <Grid item xs={2} sm={8} md={6}>
                                <FormControl component="fieldset" variant="standard" fullWidth >
                                    <FormGroup >
                                        <FormLabel sx={{ my: 1, fontWeight: 'bold' }}>Privacy Policy</FormLabel>
                                        <TextField id="outlined-basic" name="privacyPolicy" onChange={handleForm} type="text" variant="outlined" size='small' />
                                    </FormGroup>
                                </FormControl>
                            </Grid>
                            <Grid item xs={2} sm={8} md={6}>
                                <FormGroup >
                                    <FormLabel sx={{ my: 1, fontWeight: 'bold' }}>Admob</FormLabel>
                                    <div className='admob'>
                                        <TextField id="outlined-basic" name="admob" onChange={handleForm} type="text" variant="outlined" size='small' fullWidth />
                                    </div>
                                </FormGroup>
                            </Grid>
                            <Grid item xs={2} sm={8} md={6}>
                                <FormGroup >
                                    <FormLabel sx={{ my: 1, fontWeight: 'bold' }}>Play Store Link</FormLabel>
                                    <div className='admob'>
                                        <TextField id="outlined-basic" name="playStoreLink" onChange={handleForm} type="text" variant="outlined" size='small' fullWidth />
                                    </div>
                                </FormGroup>
                            </Grid>
                            <Grid item xs={2} sm={8} md={6}>
                                <FormControl component="fieldset" variant="standard" fullWidth>
                                    <FormGroup >
                                        <FormLabel sx={{ my: 1, fontWeight: 'bold' }}>App Status</FormLabel>
                                        <Select
                                            variant='outlined'
                                            labelId="demo-simple-select-autowidth-label"
                                            id="demo-simple-select-autowidth"
                                            value={appStatus}
                                            onChange={handleForm}
                                            defaultValue="Not Publish"
                                            size="small"
                                            name="appStatus"
                                        >
                                            {statuses.map((status) => (
                                                <MenuItem key={status} value={status}>
                                                    {status}
                                                </MenuItem>
                                            ))}
                                        </Select>
                                    </FormGroup>
                                </FormControl>
                            </Grid>
                            <Grid item xs={2} sm={8} md={6}>
                                <FormControl component="fieldset" variant="standard"  >
                                    <FormGroup >
                                        <FormLabel sx={{ my: 1, fontWeight: 'bold' }}>App JKS</FormLabel>
                                        <label htmlFor={2} className='upload-label' >
                                            <input
                                                style={{ display: "none" }}
                                                id={2}
                                                name="appJks"
                                                type="file"
                                                accept=".jks"
                                                onChange={onFileUpload}
                                            />
                                            <Button color="secondary" variant="contained frmbtn" component="span" >
                                                Upload File
                                            </Button>
                                        </label>
                                    </FormGroup>
                                </FormControl>
                            </Grid>
                            <Grid item xs={12} sm={12} md={12} >
                                <FormControl component="fieldset" fullWidth variant="standard" >
                                    <FormLabel sx={{ my: 1, fontWeight: 'bold' }}>ADS Id</FormLabel>
                                    {
                                        inputList.map((data, i) => {
                                            const { field, value } = data;
                                            return (
                                                <Grid container key={i} rowSpacing={{ xs: 1 }} columnSpacing={{ xs: 2, sm: 2 }} columns={{ xs: 1, sm: 2, md: 12 }} size="small" sx={{ mb: 2 }}>
                                                    <Grid item xs={2} sm={4} md={4} >
                                                        <TextField type="text" fullWidth variant="outlined" size='small' onChange={e => handleInputChange(e, i)} value={field} name="field" placeholder="field" />
                                                    </Grid>
                                                    <Grid item xs={2} sm={6} md={6}>
                                                        <TextField type="text" fullWidth variant="outlined" size='small' onChange={e => handleInputChange(e, i)} value={value} name="value" placeholder="Value" />
                                                    </Grid>
                                                    {inputList.length - 1 === i && <Button variant="text" color="primary" onClick={handleAddClick} sx={{ p: 0 }} >
                                                        <AddCircleIcon sx={{ fontSize: "35px", color: "#304ffe" }} />
                                                    </Button>}
                                                    {(inputList.length !== 1) ? <Button variant="text" color="primary" onClick={handleRemoveClick}>X</Button> : ''}
                                                </Grid>
                                            )
                                        })
                                    }
                                </FormControl>
                            </Grid>
                        </Grid>
                        <Button variant="contained frmbtn" type='submit' color="secondary" sx={{ my: 2 }}>
                            Create App
                        </Button>
                    </Box>
                </form>
            </Paper>
        </>
    )
}

export default AppForm

我遇到的问题是，当我将所有表单值保存到状态时，但在状态中，我有Ids字段，该字段正在获取数组值，但当我提交表单时，它只获取数组的第一个索引值，该值如下：

如图所示，我在inputList状态下保存数组，保存后，我想在main状态下解析对象数组，其名称为credentials，因此我不知道如何执行该操作，有人能帮助我吗？？？？

reactjs

2条答案

按热度按时间
nr9pn0ug

nr9pn0ug1#

你永远不要把inputList的值复制到credites.ids中执行任何代码。

赞(0）分享  回复(0）举报  2022-11-04
wgeznvg7

wgeznvg72#

在这里，我解决了我的问题的问题
所以我只取了一个对象变量

let idss = {};

然后我像这样修剪它的值并将其存储在状态值中。

const [inputList, setInputList] = useState([{ idName: "", ids: "" }]);
    const handleInputChange = (e, index) => {
        const { name, value } = e.target;
        const list = [...inputList];
        list[index][name.trim()] = value.trim();
        setInputList(list); 
    console.log(idss) 
    };
    // eslint-disable-next-line
    inputList.map((vals) => {
        idss[vals.idName.trim()] = vals.ids.trim()
    });
  // it will change the two different values in the field and value like this
  //{ idName: "dsadsdsd", ids: "dsada" } -> {dsadsdsd: 'dsada'}

    // handle click event of the Remove button
    const handleRemoveClick = (index) => {
        const list = [...inputList];
        list.splice(index, 1);
        setInputList(list);
    };

    // handle click event of the Add button
    const handleAddClick = () => {
        setInputList([...inputList, { idName: "", ids: "" }]);
    };

    const Ids = [idss]
    console.log(Ids)
赞(0）分享  回复(0）举报  2022-11-04
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com