Блог

У меня есть такого рода предметы

 {
  asignaturaId: 1,
  content: {
    [question_var]: {
      elements: {
        text: 'text1',
        image: 'img1.jpg'
      }
    }
    [question_var]: {
      text: 'text2',
      image: 'image2.jpg'
    }
  }
}
 

единственное, что меняется, — это [question_var] часть и количество объектов content , которые включает в себя ключ.

Я хочу иметь возможность динамически записывать все данные на входных данных и иметь возможность заменять необходимые данные.

пока я понял это:

 [...]
<FormControl>
  <InputLabel htmlFor="modulo">Asignatura ID:</InputLabel>
  <Input id="asignaturaId" name="asignaturaId" value={arrayData[0]} onChange={(e) => setAsignaturaId(e.target.value)} />
</FormControl>
  
{arrayData.map(pregunta => {
  console.log(pregunta)
  return (
    <>
    <FormControl>
       <InputLabel htmlFor="texto">Texto:</InputLabel>
       <Input id="texto" name="texto" onLoad={() => setTexto(pregunta[1].elements.text)} value={pregunta[1].elements} onChange={(e) => setText(e.target.value)} />
    </FormControl>
[...]
 

что я опустил, так это то, что я взял объект, сделал Object.entries(myObject) и присвоил его arrayData массиву. asignaturaId будет только один ключ для каждого объекта, который я получаю, поэтому я могу легко передать это значение и изменить его при вводе. Проблема content в том, что, поскольку он динамичен и слишком сильно меняется, мне трудно использовать useEffect() hook для заполнения моего ввода данными, которые я получаю, и манипулирования ими в том же вводе без изменения других значений с помощью тех же ключей или прямо вперед, не имея возможности редактировать их вообще.

У меня есть 4 дня на решение этой проблемы. пожалуйста, помогите!

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

Сначала очистите свой массив json в компоненте React hook и убедитесь, что каждый объект должен иметь уникальный ключ

 const [yourJson,setYourJson] = useState({
  asignaturaId: 1,
  content: {
    [question_var1]: {
      elements: {
        text: 'text1',
        image: 'img1.jpg'
      }
    },
    [question_var2]: {
      text: 'text2',
      image: 'image2.jpg'
    }
  }
});
 

Добавьте сеттер для добавления нового объекта в ваш json-контент

   const addNewData = (text, imgSrc) =>{
    let newIndex = Object.keys(yourJson.content).length   1;
    let newJson = yourJson;
    newJson.content[`question_var${newIndex}`] = {
      'text': text,
      'image': imgSrc
    }
    setYourJson({...newJson})
  }
 

И в обратном вызове рендеринга используйте это сопоставление

 <FormControl>
 {Object.keys(yourJson.content).map(key => (
       <InputLabel htmlFor="texto">{yourJson.content[key].text}</InputLabel>
       // <Input id="texto" name="texto" ....
      ))}
</FormControl>