반응 오류: 상태에 추가할 때 항목을 반복할 수 없습니다.
현재 스프레드 연산자를 사용하여 React에서 항목을 배열로 푸시하려고 하는데 다음 오류가 발생합니다.
PlacesForm.jsx 내의 PhotoUploader 구성 요소에서 오류가 발생합니다. 아래 구성요소에 코드를 포함시켰습니다.
PlacesForm.jsx:
으아아아addPhotobyLink() 및 uploadPhoto() 함수에서 오류가 발생합니다. 게시물 요청과 백엔드가 제대로 작동하고 둘 다에 대해 "filename"이 정의되어 있지만 "setAddedPhotos" 부분에 문제가 있습니다. 구성 요소 자체는 다음과 같습니다(PhotoUploader.jsx):
으아아아지금까지 시도한 사항은 다음과 같습니다.
import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import AccountNav from './AccountNav'
import Perks from './Perks'
import PhotosUploader from './PhotosUploader'
function PlacesForm() {
const {id} = useParams()
const [title, setTitle] = useState("")
const [address, setAddress] = useState("")
const [addedPhotos, setAddedPhotos] = useState([]) //state in question
const [description, setDescription] = useState("")
const [perks, setPerks] = useState([])
const [extraInfo, setExtraInfo] = useState("")
const [checkIn, setCheckIn] = useState("")
const [checkOut, setCheckOut] = useState("")
const [maxGuests, setMaxGuests] = useState(1)
useEffect(() => {
if (!id) return
const getPlace = async () => {
try {
const {data} = await axios.get(`/places/${id}`)
setTitle(data.title)
setAddress(data.address)
setAddedPhotos(data.addedPhotos)
setDescription(data.description)
setPerks(data.perks)
setExtraInfo(data.extraInfo)
setCheckIn(data.checkIn)
setCheckOut(data.checkOut)
setMaxGuests(data.maxGuests)
} catch (e) {
console.log(e)
}
}
getPlace()
}, [id])
const navigate = useNavigate()
const inputHeader = (text) => {
return (
<h2 className='text-2xl mt-4'>{text}</h2>
)
}
const inputDescription = (text) => {
return (
<p className="text-gray-500 text-sm">{text}</p>
)
}
const preInput = (header, description) => {
return (
<>
{inputHeader(header)}
{inputDescription(description)}
</>
)
}
const handleSubmit = async (e) => {
e.preventDefault()
const placeData = {
title,
address,
addedPhotos,
description,
perks,
extraInfo,
checkIn,
checkOut,
maxGuests
}
if (id) {
//update
try {
const res = await axios.put('/places', {
id,
...placeData,
})
navigate('/account/places')
} catch (error) {
console.log(error)
}
} else {
//create new place
try {
const res = await axios.post('/places', placeData)
navigate('/account/places')
} catch (error) {
console.log(error)
}
}
}
return (
<>
<div>
<AccountNav />
<form onSubmit={handleSubmit}>
{preInput('Title', 'Something catchy and memorable')}
<input
type="text"
placeholder="title"
value={title}
onChange={e => setTitle(e.target.value)}
/>
{preInput('Address', 'be specific')}
<input
type="text"
placeholder="address"
value={address}
onChange={e => setAddress(e.target.value)}
/>
{preInput('Photos', 'Best to have at least 4')}
<PhotosUploader addedPhotos={addedPhotos} setAddedPhotos={setAddedPhotos} />