我有以下功能组件:-

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/