如何正確修改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） ，這是我對一般狀態修改的建議。