反应、可视化和编辑 JSON 对象。填充输入数据

Question

我有这种物品

{
  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()钩子来用我收到的数据填充我的输入并在同一输入中操作它而不用改变其他值相同的键或直接前进，根本无法编辑它们。

我有 4 天的时间来解决这个问题。请帮忙！

编辑：对不起我的英语，如果我没有说清楚，我想覆盖对象，将用户不更新的数据保留在前端。

Answer 1

首先在你的 React 钩子组件中清除你的 json 数组，并确保每个对象都应该有唯一的键

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

添加 Setter 以在您的 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>