如何正确修改json in react？

Question

目标是在我存储在状态的json上执行一些crud操作。 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

看起来你正试图让一个组件直接改变其中一个道具的值，这是不推荐的。

如果您的更改仅影响下游/子组件，那么您可以将变异状态存储在组件状态而不是组件道具中。 如果这样做，您将需要使用React Hooks，因为您正在使用功能组件。

如果你真的想要改变道具，因为这些改变可能会影响提供道具的组件层次结构中的更高层，或者介于其间，你会想要使用回调来影响组件中更高的值。层次结构或使用状态管理API（如Redux） ，这是我对一般状态修改的建议。