I am getting json object in which I want to assign text to draftjs editor
but when I try to assign it it throw error
"PageContainer.js:165 Uncaught TypeError: draft_js__WEBPACK_IMPORTED_MODULE_1__.EditorState.createFromText is not a function"
this.setState({
editorState2: EditorState.createFromText(ContentState.createFromText("hi"))
});
Editor was already created from constructor with
constructor(props) {
super(props);
this.state = {
editorState1: EditorState.createEmpty(),
editorState2: EditorState.createEmpty(),
persons: []
};
}
change EditorState.createFromText to EditorState.createWithContent
this.setState({
editorState2: EditorState.createWithContent(ContentState.createFromText("hi"))
});
Related
I tried this from the docs:
async findOne(ctx) {
const { id } = ctx.params;
const entity = await strapi.services.user.findOne({ id });
console.log(entity)
return sanitizeEntity(entity, { model: strapi.models.user });
},
};
and it gave me this error 'error TypeError: Cannot read property 'findOne' of undefined
'
I'm using the fetch api to request data from my rails controller. The request getting to the controller and I'm successfully looking up some data from my database.
def show
set_recipe
#recipe.to_json
end
However, the fetch statement in my react component isn't setting the state object.
class Hello extends React.Component {
constructor(props) {
super(props);
this.state = {
data: null,
};
}
componentDidMount() {
fetch('/recipes/1')
.then(response => response.json())
.then(data => this.setState({ data }));
}
render() {
return(<div>{this.state.data}</div>)
}
}
Thoughts?
UPDATE: Using postman I realized that my component wasn't actually returning any json. I updated the controller code above to look like what you see below. After this postman started getting json responses. However, this didn't fix the fact that my component state was still null. I did some debugging in the chrome console and with the fetch was able to get a json from the server. This narrows it down to being an issue with how I'm using fetch inside the componentDidMount.
def show
set_recipe
render(json: #recipe)
end
UPDATE 2: RESOLVED
Got it working. I downloaded the react developer extension for chrome and I could see that this.state.data was actually getting set. But I was getting an error saying that react couldn't render an object. So I needed to add the .name to get the name string out of the json object. Then finally I was getting an error because this.state.data was initialized as a null and I guess the first time the component renders before mounting it hadn't yet set it to json and .name isn't a method that could be called from null. By initializing it to an empty string it worked, not sure why though. Below is the final component:
class Hello extends React.Component {
constructor(props) {
super(props);
this.state = {
recipe: ''
};
}
componentDidMount() {
fetch('/recipes/1')
.then(response => response.json())
.then(recipe => this.setState({ recipe }));
}
render() {
return(<div>{this.state.recipe.name}</div>)
}
}
Here is what it needed to look like. See original post for more detail.
Controller:
def show
set_recipe
render(json: #recipe)
end
Component:
class Hello extends React.Component {
constructor(props) {
super(props);
this.state = {
recipe: ''
};
}
componentDidMount() {
fetch('/recipes/1')
.then(response => response.json())
.then(recipe => this.setState({ recipe }));
}
render() {
return(<div>{this.state.recipe.name}</div>)
}
}
Currently using photoeditorsdk#4.3.1
With pure JS example, export image works just fine.
window.onload = () => {
const container = document.getElementById('app')
const editor = new PhotoEditorSDK.UI.ReactUI({
container,
license: JSON.stringify(PESDK_LICENSE),
assets: {
baseUrl:'/assets'
},
})
window.editor = editor
}
When try to wrap photoeditorsdk into a React Component as following
class Editor extends Component {
constructor (props) {
super(props)
}
componentDidMount () {
const container = this.refs.pesdk
const editor = new PhotoEditorSDK.UI.ReactUI({
container,
license: JSON.stringify(PESDK_LICENSE),
assets: {
baseUrl: '/assets'
},
title: 'Photo Editor'
})
window.editor = editor
}
render () {
return (
<div ref='pesdk'></div>
)
}
}
export default Editor
and export image using
editor.export(false).then(image => document.body.append(image))
from window.editor will encounter the errror
react-dom.development.js:5622 Uncaught TypeError: Cannot read property 'export' of null
at t.export (react-dom.development.js:5622)
at <anonymous>:1:14
I'm not able to reproduce this here. Can you give more details? E.g., where and when are you calling editor.export from. Also, are you passing an image to the editor as an option?
I have a component and i am passing value 543 to props :prop-room-selected,
<navigation-form :prop-room-selected='543'>
</navigation-form>
Now, From a button click, i am calling the function updateCoachStatus to change the value of propRoomSelected, but the props value is not updating.
{
template: '#navigation-form',
props: ['propRoomSelected'],
data: function () {
return {
roomSelected: this.propRoomSelected,
}
},
methods:{
updateCoachStatus: function(event){
this.propRoomSelected = 67;
}
}
}
I dont know how to change the value of props from function. Is it possible in Vue to update the value of props??
What you are doing will throw a warning in Vue (in the console).
[Vue warn]: Avoid mutating a prop directly since the value will be
overwritten whenever the parent component re-renders. Instead, use a
data or computed property based on the prop's value. Prop being
mutated: "propRoomSelected"
The value will actually change inside the component, but not outside the component. The value of a parent property cannot be changed inside a component, and, in fact, the updated value will be lost if the parent re-renders for any reason.
To update the parent property, what you should do is $emit the updated value and listen for the change in the parent.
Vue.component("navigation-form",{
template: '#navigation-form',
props: ['propRoomSelected'],
data: function () {
return {
roomSelected: this.propRoomSelected,
}
},
methods:{
updateCoachStatus: function(event){
this.$emit("update-room-selected", 67) ;
}
}
})
And in your parent template listen for the event
<navigation-form :prop-room-selected='propRoomSelected'
#update-room-selected="onUpdatePropRoomSelected">
</navigation-form>
Here is an example.
This is a common pattern and Vue implemented a directive to make it slightly easier called v-model. Here is a component that supports v-model that will do the same thing.
Vue.component("navigation-form-two",{
template: '#navigation-form-two',
props: ['value'],
data: function () {
return {
roomSelected: this.value,
}
},
methods:{
updateCoachStatus: function(event){
this.$emit("input", 67) ;
}
}
})
And in the parent template
<navigation-form-two v-model="secondRoomSelected">
</navigation-form-two>
Essentially, for your component to support v-model you should accept a value property and $emit the input event. The example linked above also shows that working.
Another approach is using a computed property for handling props:
{
template: '#navigation-form',
props: ['propRoomSelected'],
data () {
return {
roomSelected: this.computedRoomSelected,
changeableRoomSelected: undefined
}
},
computed: {
computedRoomSelected () {
if (this.changeableRoomSelected !== undefined) {
return this.changeableRoomSelected
}
return this.propRoomSelected
}
},
methods: {
updateCoachStatus (event) {
this.changeableRoomSelected = 67
}
}
}
Problem: Although from the Vue DevTools I am passing the prop correctly and the router-view component has access to the data that it needs and in the correct format, whenever I try to access any of the data properties from within the template I get Uncaught TypeError: Cannot read property 'name' of null. It's really confusing because from the DevTools everything is a valid object and the properties are not null.
App.js
const game = new Vue({
el: '#game',
data: function() {
return {
meta: null,
empire: null,
planets: null
};
},
created: () => {
axios.get('/api/game').then(function (response) {
game.meta = response.data.meta;
game.empire = response.data.empire;
game.planets = response.data.planets;
});
},
router // router is in separate file but nothing special
});
main.blade.php
<router-view :meta="meta" :empire="empire" :planets="planets"></router-view>
script section of my Component.vue file
export default {
data: function() {
return {
}
},
props: {
meta: {
type: Object
},
empire: {
type: Object
},
planets: {
type: Array
}
}
}
Any ideas? Thanks in advance.
Because of your data is async loading so when my Component.vue renders your data in parent component may not be there. So you need to check if your data is loaded. You can try this code:
{{ meta != null && meta.name }}
PS: Your created hook should be:
created() {
axios.get('/api/game').then((response) => {
this.game.meta = response.data.meta;
this.game.empire = response.data.empire;
this.game.planets = response.data.planets;
});
},
router-view is a component from view-router which can help render named views. You can not pass empire and planets to it as those are props of your component.
You have to have following kind of code to pass empire and planets to your component:
<my-component :meta="meta" :empire="empire" :planets="planets"></my-component>
You can see more details around this here.