Я пытаюсь отправить форму, которая принимает входные данные поля формы в объект состояния ловушки React. Однако к объекту полезной нагрузки обращаются другие компоненты приложения, которые ожидают, что объект полезной нагрузки будет иметь определенный формат.

const [formInput, setFormInput] = useState(); const onChange = event ={amp}gt; { event.target.name = event.target.value; } return ( {amp}lt;form onSubmit="props.onSubmit"{amp}gt; {amp}lt;label{amp}gt;First Name{amp}lt;/label{amp}gt; {amp}lt;input value="formInput.first-name" name="first-name" onChange={onChange}{amp}gt;{amp}lt;/input{amp}gt; {amp}lt;input value="formInput.person-dept" name="person-dept" onChange={onChange}{amp}gt;{amp}lt;/input{amp}gt; {amp}lt;button type="submit"{amp}gt;Add a cadet{amp}lt;/button{amp}gt; {amp}lt;/form{amp}gt; ) 

Итак, объект formInput имеет два свойства. Но они должны быть вложенными, вот так:

 //acceptable payload: {cadet: [ first-name: '', dept: '' ] } 

Я попытался вызвать функцию для обертывания их, используя новый объект состояния, но это дает мне неопределенную ошибку для свойства схемы:

 const schema = () ={amp}gt; { cadet: [ first-name: '', dept: '' ] } const [formattedInput, setFormattedInput] = useState(schema); const updateInput = () ={amp}gt; { setFormattedInput( cadet: { {first-name: {formInput.first-name} || null}, {dept: {formInput.person-dept} || null} } ) } updateInput(); api.post('~/person/cadet', updateInput); 

В приведенном выше примере свойства из схемы не определены, кадет и имя. Кроме того, чтобы установить объект setFormattedInput перед вызовом API, мне нужно создать экземпляр функции, которая его имеет, но из-за правил React вызов updateInput (); запускается, когда компонент отображается и не определен (что-то вроде компонента componentDidUpdate () для функционального компонента).

Это должно быть очень распространено — нам всем нужно переформатировать наши объекты состояния формы, прежде чем они достигнут API, если вы не создаете приложение с нуля. Кто-нибудь знает как?

Чтобы дать некоторый контекст, картограф пакета NPM делает то, что нужно, но он просто не работает ( https://www.npmjs.com/package/mapper ).

В итоге я использовал собственную оболочку и исправил мелкие синтаксические проблемы. В полезной нагрузке,

 api.post('~/person/cadet', formInput); 

я добавил

 const formattedObj = formatted(formInput); api.post('~/person/cadet', formattedObj); console.log(formattedObj); 

Затем в том же файле я определил отформатированный так:

 const formatted = (formInput) ={amp}gt; { const payload = {cadet: [ first-name: formInput.first-name, dept: formInput.person-dept ]} return payload; } 

Следовательно, formatted () передается в объекте состояния, а полезная нагрузка ведет себя как переменная блока, и ее не нужно вызывать, чтобы она была данными, возвращаемыми formatted ().

Просто незначительный шаг переноса объекта, переданного по пути URL, и некоторый синтаксис в formatted (), и основной рабочий процесс был правильным.

Я хотел поделиться, потому что потребовалось несколько умных коллег, чтобы выполнить эту работу, и его нужно учить повсеместно с помощью крючков React, чтобы снизить барьеры для входа.

Спасибо за чтение, и я надеюсь, что это работает и для вас!

PS — Если объект не сохраняется, это связано с другими синтаксическими проблемами в том, что вы передаете объекту из полей формы. Кроме того, незначительные синтаксические изменения заставят это решение работать, если что-то не так.