- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我有以下功能组件:-
import React from 'react'
import { Dropdown } from 'semantic-ui-react'
const DropDownMenu= (props)=> {
const options = [
{ key: 'fruits', text: 'fruits', value: 'Fruits' },
{ key: 'vegetables', text: 'vegetables', value: 'Vegetables' },
{ key: 'home-cooked', text: 'home-cooked', value: 'Home-Cooked' },
{ key: 'green-waste', text: 'green-waste', value: 'Green-Waste' },
{ key: 'other', text: 'other', value: 'other' },
];
function onChangeHandler(e) {
console.log(e.target.innerText);
props.getCategoryValue(e.target.innerText);
};
return (
<Dropdown placeholder='Category' fluid selection options={options}
onChange={onChangeHandler} />
);
};
export default React.memo(DropDownMenu);
上面的功能组件在其父组件 sellForm.js 中呈现如下:-
import React,{Component} from 'react'
import { Button, Form} from 'semantic-ui-react'
import AutoCompleteInput from '../GoogleAutocomplete/autoComplete';
import DropDownMenu from '../DropDown/DropDown';
import update from 'react-addons-update';
import './sellForm.css';
import PreviewImages from '../PreviewImage/previewUploadedImages';
import FileInput from '../FileInput/FileInput';
class sellForm extends Component{
constructor(props){
super(props);
//this.imageUpload = React.createRef();
this.state={
postID: '',
title: '',
description:'',
category:'',
price: '',
amount: '',
freshness: '',
contact: '',
location: '',
timestamp: '',
images: []
}
}
getCategoryValue=(category)=>{
this.setState({category: category})
};
getItemLocation=(locationObject)=>{
this.setState({location: locationObject})
};
saveInfo=(e)=>{
this.setState({
[e.target.name]:e.target.value});
};
postButtonClickHandler=()=>{
console.log(this.state)
console.log(typeof (this.state.images[0].file))
// send this info to firebase database
};
handleImageUpload= (file)=>{
console.log('handle image Upload in sell form');
this.setState({
images: update(this.state.images, {$push: [file]})
})
};
handleImageDeletion=(indexOfImage)=>{
console.log('handle image deletion in sell form - index to be deleted is : ' ,indexOfImage);
this.setState((prevState)=>{
return{
// images: prevState.images.splice(indexOfImage,1)
images: update(this.state.images, {$splice: [[indexOfImage,1]]})
}
})
};
shouldComponentUpdate(nextProps,nextState){
console.log('[sellform.js] shouldComponentUpdate');
return true;
}
componentDidMount(){
console.log('[sellform.js] componentDidMount');
}
static getDerivedStateFromProps(props, state){
//when user uploads or deletes images, then props changes
//this lifecycle executes when function gets new props before render()
//only use when component's inner state depends upon props...
console.log('[sellform.js] getDerivedStateFromProps')
return null;
}
componentDidUpdate(prevProps){
console.log('[sellform.js] componentDidUpdate')
}
componentWillUnmount(){
console.log('[sellform.js] componentWillUmMount')
}
render(){
console.log('render of sellForm');
console.log(this.state.images);
let previewImages = (<PreviewImages deleteUploadedImage={this.handleImageDeletion} images={this.state.images}/>)
return(
<Form>
<Form.Field>
<DropDownMenu getCategoryValue={this.getCategoryValue}/>
</Form.Field>
<Form.Field>
{<AutoCompleteInput
onChange={()=>{}}
onPlaceSelected={this.getItemLocation}/>}
</Form.Field>
<Form.Field>
<input
placeholder='What are you selling ?'
name="title"
onChange={this.saveInfo}/>
</Form.Field>
<Form.Field>
<input
placeholder='Price'
name="price"
onChange={this.saveInfo} />
</Form.Field>
<Form.Field>
<FileInput appendImageToArray={this.handleImageUpload}/>
</Form.Field>
<Form.Field>
<Button
type='submit'
onClick={this.postButtonClickHandler}>Post
</Button>
</Form.Field>
<Form.Field>
<div className='previewImageContainer'>
{previewImages}
</div>
</Form.Field>
</Form>
)
}
}
export default sellForm
当 sellFom 呈现时,它会给出以下错误:- Uncaught Error :元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:对象。
检查sellForm
的渲染方法。 在不变量(react-dom.development.js:57)
React 社区有任何想法吗??
最佳答案
我通过将 react
和 react-dom
更新为 16.6.0 解决了这个问题。
关于javascript - React 备忘录功能给出 :- Uncaught Error: Element type is invalid: expected a string but got: object,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53056767/
你好我是 Angular JS 的初学者,当我开始创建模块和 Controller 时,我无法打印我的消息,下面是我的代码 var myModule = angular.module("myFirst
我对 JQuery 还是个新手,我正在尝试使用它遍历 JSON 数组并使用数组中的数据更新我的网页。 JSON 文件如下所示: [ { "firstname":"John",
我正在使用 AngularJS 1.3.5,我正在尝试从 json 文件中获取信息。这是我的代码:HTML 文件: {{da
我正在创建 Bootstrap 模板。我收到两个错误,我不知道自己做错了什么。当我搜索类似的问题时,似乎是脚本错乱了,但我认为它们的位置是正确的。 两个错误: 未捕获的 ReferenceError:
我试图用子菜单制作导航栏,但我一直收到 dropMenu 未定义,当我将鼠标悬停在两个巴黎链接上时,我收到 Uncaught TypeError: Cannot read property 'styl
我正在尝试在名为 UserComponent 的 Angular 组件上运行 karma 测试。在此组件中,我有一个 ngOnInit 执行此操作: ngOnInit() { const
当我启用 login.spec.ts 测试时,对于不同的测试,我总是随机收到此错误。未捕获错误:未捕获( promise ):错误:无法匹配任何路由。 URL 段:“注销” 我尝试使用以下方法伪造 a
自从我设置一个与 Angular 一起运行的网络应用程序以来已经有一段时间了。我正在通过一个旧项目回顾我的步骤(尝试在我正在做的页面上实现一个 Controller ,确保 Controller 文件
在 AWS Elastic Beanstalk 上部署应用程序后会发生此错误。构建和部署成功,所有模块都正常工作,除了一个显示上述 super 表达式错误的模块。一切似乎都在本地机器上正常工作,甚至可
我刚刚开始使用 Node.js 并尝试使用模块。我已经安装了 Node 和 npm,并确保一切顺利。我将在下面添加代码来向您展示我得到了什么。 我有两个 js 文件,它们在这里。 app.js: va
在 Android 4.4.2 KitKat (API 19) 模拟器上运行时,我的代码出现问题... 当我在 Android 4.3 (API 18) 模拟器上模拟我的项目时,它正常工作并使用 Ma
function more(){ var MoreDetails = document.getElementById('MoreDetails'); More
我正在练习 Javascript,并且有以下代码,该代码在 sets[i][j] = initial_sets [i ][j]; 行。这个想法似乎是正确的,但我不明白为什么会出现错误。 var set
$(document).ready(function(){ $('#name').val('Name1'); }); function clickMe(){ console.lo
我正在创建一个网络应用程序,但我遇到了一个无法解决的简单问题。我已将产生问题的代码放在这里:http://jsfiddle.net/rkumarnirmal/5w3FG/ 应该显示此答案的第二个ale
我正在执行一项长时间运行的任务,在中间的某个位置,可能会抛出此异常: Uncaught DOMException: Blocked a frame with origin "http://localh
我试图通过使用 HTML5 中的 onEnded 属性一首接一首地播放 3 首歌曲。这是我的第一次尝试,但出现错误。 错误: Uncaught ReferenceError: src is not d
检查 Fiddle 以查看发生的故障。 当我将数据(即使我将其留空)添加到文本框并尝试单击“添加”时,它没有执行任何操作。 打开 Chrome 和 Firefox 控制台都给我同样的错误,它说“cha
这个问题在这里已经有了答案: How to access the correct `this` inside a callback (13 个回答) 关闭5年前。 您好,这是我的(快捷方式)示例代码:
我正在处理一个项目,每次 Node 运行我的代码时,浏览器控制台都会给我这个: Uncaught TypeError: Failed to resolve module specifier "expr
我是一名优秀的程序员,十分优秀!