Question

目标是对我已存储在状态中的json执行一些操作。 json结构不是固定的，而是不断变化和动态的。

我使用递归功能组件来显示json结构。它具有一个记录json层次结构的功能，每当选择一个值时，该层次结构中就会存储给定值。看起来像这样：[“ arrayName”，“ arrayIndex”，“ objectName”，“ key”，“ value”]。至此，我知道此值在json结构中的位置，尽管我不确定如何从此处继续。最后，我认为这没有用。

功能组件具有此签名

const DisplayValue = ({ structure, category, value, onEdit })

函数看起来像这样

const handleEdit = (structure, val) => {
    structure.unshift(val)
    onEdit(structure, category)
  }

根据某些条件被调用，例如

if (Array.isArray(value)) {
    return (
      <div style={{ border: '1px solid grey', padding: 10 }}>
        {value.map((element, i) => {
          return (
            <div key={i}>
              <DisplayValue
                structure={structure}
                value={element}
                onEdit={() => handleEdit(structure, i)}
              />
            </div>
          )
        })}
      </div>
    )
  }

最后，如果该值既不是数组也不是对象：

return (
    <div>
      <Button variant='light' onClick={() => handleEdit(structure, value)}>
        {value}
      </Button>
    </div>
  )

是否有人在处理和修改json结构方面有经验，愿意为我指明正确的方向？

Answer 1

您似乎正在尝试让一个组件直接更改其道具之一的值，因此不建议这样做。

如果更改仅影响下游/子组件，则可以将突变状态存储在组件状态而不是组件prop中。如果这样做，则由于要使用功能组件，因此要使用React Hooks。

如果您确实希望更改道具，因为更改可能会影响提供道具的组件层次结构中的较高层次或中间，因此您将希望使用回调来影响较高的值在组件层次结构中，或考虑使用状态管理API（例如Redux），这是我通常建议的此类状态修改的建议。

如何正确修改React中的JSON？

1 个答案: