如何正确修改json in react？

Question

The goal is to execute some crud operations on a json I have stored in state. The json structure is not fixed, but rather changing and dynamic.

I use a recursive functional component to display the json structure. It has a function that records the json hierarchy within which the given value is stored whenever a value is selected. Looks something like this: ["arrayName", "arrayIndex", "objectName", "key", "value"]. At this point I know where this value resides in the json structure, although I'm not sure how to continue from here. In the end, I don't find this useful.

The functional component has this signature

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

The function looks like this

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

And is called depending on some conditions, for example

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>
    )
  }

Finally if the value is neither an array or object:

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

Is there someone with experience with handling and modifying json structures, willing to point me in the right direction?

Answer 1

It looks like you're trying to get a component to directly change the value of one of its props, which is not recommended.

If your changes only affect downstream/child components then you could store the mutated state in component state instead of component props. If you do this, you'll want to use React Hooks since you're using a functional component.

If you really do want the props to change, since the changes might affect something higher up in the component hierarchy where the props are provided or in-between, you'll want to either use a callback to affect the value higher up in the component hierarchy or look into using a state management API such as Redux , which is my recommendation for such state modifications in general.