settings are only applied on first render
- Dominant language
- JavaScript
- Stars
- 97
- Forks
- 38
- PR merge metrics
- No merged PRs in 30d
Description
I created a generic editor component, where both the data and the settings are retrieved using Ajax.
The standard React Ajax initialization pattern is used.
The initial setting value was {}. The react-json code correctly displays the data retrieved by the Ajax call but ignores the corresponding new setting value.
Generating a placeholder for the initial render before the Ajax call responds is one way to workaround the problem.
```
var React = require('react');
var RxDom = require('rx-dom');
var Editor = require('react-json');
class JsonUpdate extends React.Component {
constructor(props) {
super(props);
this.name = props.name;
this.state = {
value: {},
settings: {}
};
}
componentDidMount() {
Rx.DOM.ajax("/status/" + name)
.subscribe(
function (data) {
var info = JSON.parse(data.response);
this.setState({
value: info.data,
settings: info.settings
});
}.bind(this),
function (error) {
console.log(error);
}
);
}
postChange(value) {
var str = JSON.stringify(value);
Rx.DOM.ajax({url: "/apply/" + name, body: str, method: "POST"})
.subscribe(
function (data) {
},
function (error) {
console.log(error);
}
);
}
render() {
if (Object.getOwnPropertyNames(this.state.settings).length == 0)
return
else
return (
);
}
}
module.exports = JsonUpdate;
```
Contributor guide
No contributing guide indexed for this repository
Research direction
Start at the react-json Editor component and inspect how its settings prop is handled after the first render. Reproduce the provided JsonUpdate example with settings loaded asynchronously, then verify that the editor applies the updated settings without requiring an initial placeholder render.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100