Данные формы не обновляют массив с помощью React ⇐ Javascript
-
Гость
Данные формы не обновляют массив с помощью React
Я работаю над небольшим проектом доски объявлений и пытаюсь обновить свой массив новым сообщением на доске, отправленным с помощью формы. По какой-то причине он не добавляется в массив. Ведение журнала показывает, что данные формы собираются моим компонентом доски объявлений, но он не обновляет состояние.
Есть предложения?
Код в кодах
КОМПОНЕНТ ФОРМЫ
const OPTIONS = [ { метка: «общее», значение: «общее», }, { этикетка: «аниме», значение: «аниме», }, { этикетка: "игры", значение: «игровой», }, { этикетка: "музыка", значение: "музыка", }, ]; функция экспорта по умолчанию PostForm({ addBulletin }) { const [formData, setFormData] = useState({ заголовок: "", комментарий: "", тема: OPTIONS[0].значение, }); const [topic, setTopic] = useState(OPTIONS[0].value); const handleChange = (событие) => { const {имя, значение} = event.target; setFormData((prevFormData) => ({ ...prevFormData, [имя]: значение })); }; const handleSubmit = (событие) => { событие.preventDefault(); const newId = Date.now(); const newBulletin = { идентификатор: новыйId, ...формДанные, }; addBulletin (новый бюллетень); console.log(formData.topic); setFormData({ заголовок: "", подзаголовок: "", комментарий: "", тема: OPTIONS[0].значение, }); setTopic(formData.topic); }; функция openForm() { setFormShow((formShow) => !formShow); } возвращаться ( Тема {OPTIONS.map(опция => ( {option.label} ))} Сообщение Представлять на рассмотрение ); } КОМПОНЕНТ ДОСКИ ОБЪЯВЛЕНИЙ
экспортировать функцию по умолчанию Bulletins({topic}) { const [showPostForm, setShowPostForm] = useState (false); const [бюллетени, setBulletins] = useState([ { идентификатор: 0, тема: 'Общее', title: "Доска объявлений жива!", комментарий: «Первоначальное сообщение на доске». }, { идентификатор: 1, тема: 'Общее', title: «Это пост», комментарий: «Это комментарий» }, { идентификатор: 2, тема: «Игры», название: «Соник против Марио», комментарий: «Кто лучший персонаж?» }, ]); const addBulletin = (newBulletin) => { setBulletins([...бюллетени, новыйбюллетень]); console.log(новыйбюллетень) console.log(бюллетени); }; const btnstyle ={ Цвет фона: «прозрачный», цвет: 'аква', граница: 'нет', } const filteredBulletins = Bulletins.filter((бюллетень) => Bulletin.topic === тема); возвращаться ( {filteredBulletins.map((бюллетень, id) => ( ))} {showPostForm && } setShowPostForm(true)}>Добавить сообщение ); }
Я работаю над небольшим проектом доски объявлений и пытаюсь обновить свой массив новым сообщением на доске, отправленным с помощью формы. По какой-то причине он не добавляется в массив. Ведение журнала показывает, что данные формы собираются моим компонентом доски объявлений, но он не обновляет состояние.
Есть предложения?
Код в кодах
КОМПОНЕНТ ФОРМЫ
const OPTIONS = [ { метка: «общее», значение: «общее», }, { этикетка: «аниме», значение: «аниме», }, { этикетка: "игры", значение: «игровой», }, { этикетка: "музыка", значение: "музыка", }, ]; функция экспорта по умолчанию PostForm({ addBulletin }) { const [formData, setFormData] = useState({ заголовок: "", комментарий: "", тема: OPTIONS[0].значение, }); const [topic, setTopic] = useState(OPTIONS[0].value); const handleChange = (событие) => { const {имя, значение} = event.target; setFormData((prevFormData) => ({ ...prevFormData, [имя]: значение })); }; const handleSubmit = (событие) => { событие.preventDefault(); const newId = Date.now(); const newBulletin = { идентификатор: новыйId, ...формДанные, }; addBulletin (новый бюллетень); console.log(formData.topic); setFormData({ заголовок: "", подзаголовок: "", комментарий: "", тема: OPTIONS[0].значение, }); setTopic(formData.topic); }; функция openForm() { setFormShow((formShow) => !formShow); } возвращаться ( Тема {OPTIONS.map(опция => ( {option.label} ))} Сообщение Представлять на рассмотрение ); } КОМПОНЕНТ ДОСКИ ОБЪЯВЛЕНИЙ
экспортировать функцию по умолчанию Bulletins({topic}) { const [showPostForm, setShowPostForm] = useState (false); const [бюллетени, setBulletins] = useState([ { идентификатор: 0, тема: 'Общее', title: "Доска объявлений жива!", комментарий: «Первоначальное сообщение на доске». }, { идентификатор: 1, тема: 'Общее', title: «Это пост», комментарий: «Это комментарий» }, { идентификатор: 2, тема: «Игры», название: «Соник против Марио», комментарий: «Кто лучший персонаж?» }, ]); const addBulletin = (newBulletin) => { setBulletins([...бюллетени, новыйбюллетень]); console.log(новыйбюллетень) console.log(бюллетени); }; const btnstyle ={ Цвет фона: «прозрачный», цвет: 'аква', граница: 'нет', } const filteredBulletins = Bulletins.filter((бюллетень) => Bulletin.topic === тема); возвращаться ( {filteredBulletins.map((бюллетень, id) => ( ))} {showPostForm && } setShowPostForm(true)}>Добавить сообщение ); }
Мобильная версия