React 备忘录功能给出：- 未捕获的错误：元素类型无效：预期为字符串但得到：对象

Posted 2023-02-25

【中文标题】React 备忘录功能给出：- 未捕获的错误：元素类型无效：预期为字符串但得到：对象

【英文标题】：React Memo Feature gives :- Uncaught Error: Element type is invalid: expected a string but got: object

【发布时间】：2018-10-30 03:00:39

【问题描述】：

我有以下功能组件：-

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 呈现时，它会出现以下错误：- 未捕获的错误：元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：对象。

检查sellForm的渲染方法。 在不变量（react-dom.development.js:57）

有什么想法能反应社区吗？？

【问题讨论】：

可以是这条线吗？ <AutoCompleteInput onChange=()=> onPlaceSelected=this.getItemLocation/> 尝试删除大括号

您能否尝试在您的 SellForm 中评论备忘录评论并检查。逐一评论组件将帮助您确定确切原因

@SaidKholov.... onChange=()=> ....这里我只传递了空函数..我检查了它不是问题...

@ShubhamKhatri ...我尝试评论，，，，如果我在 SellForm 的渲染方法中评论 ...它可以工作.....没问题...与 在 SellForm 的渲染方法中给出相同的错误,,,,,

你使用的是哪个版本的React，能否确定你有16.6.0或更高版本的react和react-dom

【参考方案1】：

我通过将 react 和 react-dom 都更新为 16.6.0 解决了这个问题。

【讨论】：

我认为 ,,, 这是版本的问题，但是我使用 npm install --save react@^16.6.0 react-dom@^16.6.0 更新了...它在 localhost 中搞砸了...当我创建沙箱进行共享时，它正在工作很好……

终于成功了……版本更新有问题

更新 react 和 dom 版本，它工作正常，因为它在 react@16.6.0 中引入

很棒的发现！只更新 react 版本是不够的。

【参考方案2】：

嘿，我认为问题是由于命名 od sellForm。据 Axe 所知，React 接受 CamelCase Name 的类。现在以这个例子为例：

function Example() 
  // Declare a new state variable, which we'll call "count"
  return (
    <div>
      <p>Tes</p>
    </div>
  );

const MemoizedExample = React.memo(Example)
function exampleParent() 
  // Declare a new state variable, which we'll call "count"
  return (
    <div>
      <p>Parent</p>
       <MemoizedExample />
    </div>
  );


ReactDOM.render(<exampleParent />, document.getElementById("root"))

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.production.min.js"></script>

<div id="root"></div>

在上面我已经将名字命名为类的小写，看渲染没有发生。 如果您将组件的名称从 exampleComponent 更改为 ExampleComponent 它将起作用。类似地，您的问题将您的类名从 sellFrom 更改为 SellForm :)。这是组件名称为camelcase的工作：

function Example() 
  // Declare a new state variable, which we'll call "count"
  return (
    <div>
      <p>Tes</p>
    </div>
  );

const MemoizedExample = React.memo(Example)
function ExampleParent() 
  // Declare a new state variable, which we'll call "count"
  return (
    <div>
      <p>Parent</p>
       <MemoizedExample />
    </div>
  );


ReactDOM.render(<ExampleParent />, document.getElementById("root"))

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.production.min.js"></script>

<div id="root"></div>

【讨论】：

正如您所建议的那样，我对 SellForm 进行了更改，但这并没有帮助....当我在父组件 SellModal 中呈现 SellForm 时，我实际上已经在关注 CamelCasing，如下所示： import SellForm from ' ./sellForm' ***.com/a/53057702/10578052

我的意思是尝试将sellForm组件的名称更改为SellForm组件。看这是 React.memo 的非常简单的实现。我很难在这方面看到任何其他错误。仔细检查答案中附加的代码sn-p。

@simbathesailor....我确定我使用的是 CamelCase 约定....但错误仍然存​​在....根据 React 文档应该是非常直接的实现..但是 Idk y 它不适合我....

我相信 sellForm 本身没有问题，因为错误发生在其render()

@skyboyer，是的，你可能是对的。需要更多信息，我想在这里。其他东西正在搞砸它。不能像现在这样下结论。 :)