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

【问题标题】：how to add new object to an existing json data如何将新对象添加到现有的 json 数据
【发布时间】：2020-06-08 04:46:29
【问题描述】：

所以我正在尝试完成这个项目，我使用 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>

【问题讨论】：

这是一个数组，你必须遍历这个数组，然后在每次迭代中解析 Json 以获得所需的字段。如果这不能满足您的要求，请详细说明问题出在哪里，以便进一步了解
如果你能看到我有一个表格那么我想要的是当我在表格中输入三个信息时，输入的数据将被添加到json数据中我不需要解析原始json 来获取数据我只需要将新数据以我无法做到的正确格式添加到 json 数据中
你能分享你想要在其中添加数据的 JSON（你在问题开头提到的那个）
@codeogeek 我已经创建了一个沙箱，请告诉我它是否有效，希望您能提供帮助：codesandbox.io/live/R6Q7X0
@codeogeek 如果您可以看到我已经使用 axios 获取数据并使用 useState photo 在 newPhotosLocally 中存储它们，我有一个表单，我想从中获取数据并将它们保存在 newPhotosLocally 中正确的格式

标签： json reactjs forms

【解决方案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);

希望这会有所帮助！

【讨论】：