diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js index 6ebb2554ba..6ec0d15787 100644 --- a/src/components/BrowserCell/BrowserCell.react.js +++ b/src/components/BrowserCell/BrowserCell.react.js @@ -221,7 +221,10 @@ class BrowserCell extends Component { } componentDidUpdate(prevProps) { - if (this.props.value !== prevProps.value || this.props.isEditing !== prevProps.isEditing) { + const valueChanged = typeof this.props.value === 'object' && typeof prevProps.value === 'object' + ? JSON.stringify(this.props.value) !== JSON.stringify(prevProps.value) + : this.props.value !== prevProps.value; + if (valueChanged || this.props.isEditing !== prevProps.isEditing) { this.renderCellContent(); this.props.value?._previousSave ?.then(() => this.renderCellContent()) diff --git a/src/components/BrowserRow/BrowserRow.react.js b/src/components/BrowserRow/BrowserRow.react.js index be044ddd1f..f708c4b6e3 100644 --- a/src/components/BrowserRow/BrowserRow.react.js +++ b/src/components/BrowserRow/BrowserRow.react.js @@ -93,11 +93,12 @@ export default class BrowserRow extends Component { attr = new Parse.Relation(obj, name); attr.targetClassName = columns[name].targetClass; } else if (type === 'Array' || type === 'Object') { - // This is needed to avoid unwanted conversions of objects to Parse.Objects. - // "Parse._encoding" is responsible to convert Parse data into raw data. - // Since array and object are generic types, we want to render them the way - // they were stored in the database. - attr = encode(obj.get(name), undefined, true); + const raw = obj.get(name); + if (raw !== undefined && raw !== null) { + attr = encode(raw, undefined, true); + } else { + attr = raw; + } } } let hidden = false; diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js index 52a7d02294..78ae58906f 100644 --- a/src/dashboard/Data/Browser/DataBrowser.react.js +++ b/src/dashboard/Data/Browser/DataBrowser.react.js @@ -88,14 +88,19 @@ export default class DataBrowser extends React.Component { ); this.setState({ order }); } - if (this.props.columns) { - this.setState({ numberOfColumns: Object.keys(this.props.columns).length }) + const newNumberOfColumns = this.props.columns + ? Object.keys(this.props.columns).length + : 0; + if (newNumberOfColumns !== this.state.numberOfColumns) { + this.setState({ numberOfColumns: newNumberOfColumns }); + } + if (props.data !== this.props.data || props.className !== this.props.className) { + this.setState({ + selectedCells: { list: new Set(), rowStart: -1, rowEnd: -1, colStart: -1, colEnd: -1 }, + firstSelectedCell: null, + selectedData: [], + }); } - this.setState({ - selectedCells: { list: new Set(), rowStart: -1, rowEnd: -1, colStart: -1, colEnd: -1 }, - firstSelectedCell: null, - selectedData: [], - }); } async componentDidMount() {