передать тело JSON через функции для публикации аксиом данных

Question

После долгих исследований, наконец, я нашел хороший способ передать все мои обновленные значения объектов через компоненты, но я не нашел способа опубликовать его с помощью ax ios. В моем коде у меня есть функция onChange, которая приносит обновленные значения из входов в другой компонент (или список обновленных значений объектов), и функция для публикации. Если я отправлю жестко закодированный объект, все будет нормально, но я не могу найти способ для установки обновленных значений из onChange в фактическую функцию «updateData» (функция, которая делает сообщение ax ios.

import React, {useState, useEffect} from 'react';
import {CustomFieldsList} from './customFieldsList';
import {toast} from 'react-toastify';
import {ToastInnerDisplay} from '@learnifier/jslib-utils';
import axios from 'axios';

export function CustomFieldsContainer({match}) {
  const [value, setValue] = useState({
    data: null, // <-- maybe I should pass "newList" here?
    loading: true,
    error: null,
  });

  /**
   * Initial loading of data.
   */
  async function fetchData() {
    setValue({...value, error: null, loading: true});
    try {
      let url = `http://localhost:3000/projectcustomfields.json/list/1741`;
      const res = await fetch(url, {
        method: 'POST',
        mode: 'cors',
        withCredentials: true,
        credentials: 'include',
      });
      let data = await res.json();
      setValue(prevValue => ({...prevValue, data: data.customFields, loading: false}));
    } catch (error) {
      toast.error(<ToastInnerDisplay message={error.message} />);
      setValue({...value, error, loading: false});
    }
  }

  const updateData = async () => {
    console.log(value.data);

    let arrOfObj = { // <-- a "hardcoded" objects to update 
      "items": [
        {
          "id": 'party',
          "value": 'value2new',
        },
        {
          "id": 'goal',
          "value": 'value2new2',
        }
      ],
    };
    try {
      await axios({
        url: `http://localhost:3000/projectcustomfields.json/updateMany/1741`,
        data: arrOfObj, // <-- right now im posting the body JSON avobe declared but I want to pass "newList" variable which I declare on onChange function
        method: 'POST',
        mode: 'cors',
        withCredentials: true,
      });
    } catch (error) {
      toast.error(<ToastInnerDisplay message={error.message} />);
      console.log('Error when updating values: ', error);
    }
  };

  const onChange = ({index, updatedValue}) => {
    const newList = [...value.data];
    const newValue = {...newList[index]};
    newValue.value = updatedValue;
    newList[index] = newValue;
    setValue({
      data: newList, //<-- this newList I want to post in upadteData()
      loading: false,
      error: null,
    });
  };

  useEffect(() => {
    fetchData();
  }, []);

  if (value.loading) {
    return <div>loading...</div>;
  } else if (value.error) {
    return <div>ERROR</div>;
  } else {
    return (
      <div className={'section-component'}>
        <div className={'col-md-6 col-sm-12'}>
          <h2>Custom Fields</h2>
          <CustomFieldsList onChange={onChange} updateData={updateData} list={value.data} />
        </div>
      </div>
    );
  }
}

Любая помощь более чем приветствуется!

Answer 1

Исправлено :) Мне пришлось сопоставить элементы следующим образом:

let arrOfObj = {
  items: [...value.data],
};
let postData = [];
arrOfObj.items.map((element, index) => {
  postData.push({id: element.id, value: element.value});
});
arrOfObj.items = postData;

и VOILA! выполняет работу