时间戳

首页 > 解决方案 > 反应、可视化和编辑 JSON 对象。填充输入数据

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

问题描述

我有这种物品

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

不同的是key 包含的[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天的时间解决这个问题。请帮忙！

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

标签： javascriptarraysjsonreactjsforms

解决方案

首先在你的 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>

推荐阅读