React 18.2.0 在 onClick 时动态生成表单 - 表单来表示深度嵌套的 JSON

Question

我有一个深度嵌套的

JSON 

对象。我想显示与 JSON 值相关的输入字段。为了遍历深度嵌套的 JSON 对象，我使用递归并收集所有已处理的输入字段，将其设置为在模块的主返回中显示的状态。但是，它会导致太多的重新渲染导致无限循环。

Uncaught run time errors

。

我尝试过各种方法，例如，

1. 将

   displayFrom

   存储在

   displayProperties 

   中的单独常量中，并将其

   const 

   放入

   setDisplayForm

   中。

2. 在App模块的主返回中应用了各种条件，例如条件渲染中的

   typeof properties[ key ] === 'object' 

3. 使用

   useMemo 

   来包装

   displayProperties 

   函数，以免导致过多的重新渲染问题。

我已经在 stackblitz 中实现了相同的功能，请查看我的代码和评论。 https://stackblitz.com/edit/vitejs-vite-kjyz2y?file=src%2FApp.jsx&terminal=dev

有一个

const input

它使代码看起来更大更复杂，但它只是一个 JSON 嵌套对象。实际的逻辑和代码如下所示，

import { useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import './App.css';

function App() {
const [displayFrom, setDisplayForm] = useState();

const input = {} // a deeply nested JSON object

const displayProperties = (properties) => {
return (
  <>
    {Object.keys(properties).map((key, index) => (
      <div key={index}>
        <span>{key === 'label' ? properties[key] : null}</span>
        <span>
          {JSON.stringify(properties[key]).includes('properties') ||
          JSON.stringify(properties[key]).includes('label')
            ? displayProperties(properties[key])
            : null}
        </span>
      </div>
    ))}
  </>
);
};
const builtForm = () => displayProperties(input);
setDisplayForm(builtForm);

return <>{displayFrom}</>;
}

export default App;

Answer 1

问题可能是由于您无法使用索引作为键值。

尝试这样的事情：

function App() {
  const [displayFrom, setDisplayForm] = useState();

  const input = {}; // a deeply nested JSON object

  let id = 1;

  const displayProperties = (properties) => {
    return (
      <>
        {Object.keys(properties).map((key) => {
          id++;
          return (
            <div key={id}>
              <span>{key === 'label' ? properties[key] : null}</span>
              <span>{JSON.stringify(properties[key]).includes('properties') || JSON.stringify(properties[key]).includes('label') ? displayProperties(properties[key]) : null}</span>
            </div>
          );
        })}
      </>
    );
  };
  const builtForm = () => displayProperties(input);
  setDisplayForm(builtForm);

  return <>{displayFrom}</>;
}