Question

所以我正在尝试通过这个项目，我使用api从json获得了这些数据：

所以基本上我是从api获取数据的，将它们加载到本地，现在我已经使用useForm创建了此表单：

所以我正在做的是让表单获取这些数据并将其添加到内部已加载的现有json数据中，我该怎么做？我真的很困，不知道该怎么做

我正在加载json代码：

const [photo,setPhoto] = useState([])
    const newPhotosLocally = photo

    newPhotosLocally.forEach((item,i) =>{
        item.photoId = i +1;
    })

    console.log(newPhotosLocally)

    useEffect(() => {
        axios.get("https://jsonplaceholder.typicode.com/photos").then(
            result => {
                setPhoto(result.data)
            }
        )
    },[])

我的表单代码：

const {register,handleSubmit,errors} = useForm();

        const onSubmit = (data) => {
            console.log(data)
            newPhotosLocally.push([data])

        };

<form onSubmit={handleSubmit(onSubmit)}>
                    <input type="url" placeholder="link" name="link" ref={register}/>
                    <input type="url" placeholder="thumbnail url" name="thumbnail" ref={register}/>
                    <input type="text" placeholder="title" name="title" ref={register}/>
                    <input type="submit" />
                </form>

Answer 1

我可以看到您在表单中只采用了3个值，并且我假设您会使用一些随机逻辑传递专辑ID和ID。理想情况下，您的JSON对象是对象数组，因此，当您从表单中获取输入时，请使用如下数据创建对象，

const obj={albumId:'1', id:'2', photoId:'2', title:'abcd', thumbnailUrl:'https://abcd.com', url:'https://abcd.com'}

将初始JSON大数据放入变量中，

const originalJSON = <your original data>
const parsedData = JSON.parse(originalJSON);
parsedData.push(obj);
originalJSON = JSON.Stringify(parsedData);

希望这会有所帮助！

如何将新对象添加到现有的json数据

1 个答案: