Javascript 未捕获错误：元素类型无效：应为字符串（用于内置组件）或类/函数。。。单击“添加”按钮后
我正在尝试运行React应用程序，它已成功编译（带有警告），但在我尝试单击按钮时收到此错误消息 这是我的App.js：Javascript 未捕获错误：元素类型无效：应为字符串（用于内置组件）或类/函数。。。单击“添加”按钮后,javascript,reactjs,Javascript,Reactjs,我正在尝试运行React应用程序，它已成功编译（带有警告），但在我尝试单击按钮时收到此错误消息 这是我的App.js： import React from "react"; import { Component } from "react"; import { Button } from "react-bootstrap"; import Gift from "./Gift.js"; export default class App extends Component { construc
import React from "react";
import { Component } from "react";
import { Button } from "react-bootstrap";
import Gift from "./Gift.js";
export default class App extends Component {
constructor() {
super();
this.state = { gifts: [] };
}
addGift = () => {
const { gifts } = this.state;
const ids = this.state.gifts.map(gift => gift.id);
const max_id = ids.length > 0 ? Math.max(ids) : 0;
gifts.push({ id: max_id + 1 });
this.setState({ gifts });
};
removeGift = id => {
const gifts = this.state.gifts.filter(gift => gift.id !== id);
this.setState = { ...gifts };
};
render() {
return (
<div>
<h2>Gift Giver</h2>
<div className="gift-list">
{this.state.gifts.map(gift => {
return (
<Gift key={gift.id} gift={gift} removeGift={this.removeGift} />
);
})}
</div>
<Button className="btn-add" onClick={this.addGift}>
Add Gift
</Button>
</div>
);
}
}
从“React”导入React；
从“react”导入{Component}；
从“react bootstrap”导入{Button}；
从“/Gift.js”导入礼物；
导出默认类应用程序扩展组件{
构造函数（）{
超级（）；
this.state={gives:[]}；
}
addGift=（）=>{
const{gives}=this.state；
const id=this.state.gives.map（gift=>gift.id）；
const max_id=ids.length>0？Math.max（ids）：0；
礼品推送（{id:max_id+1}）；
这个.setState（{gives}）；
};
removeGift=id=>{
const gives=this.state.gives.filter（gift=>gift.id！==id）；
this.setState={…礼品}；
};
render（）{
返回(
送礼者
{this.state.gives.map（gift=>{
返回(
);
})}
添加礼物
);
}
}
import React from "react";
import { Component } from "react";
import {
Form,
FormGroup,
FormControl,
ControlLabel,
Button
} from "react-bootstrap";
export default class Gift extends Component {
constructor() {
super();
this.state = { person: "", present: "" };
}
render() {
return (
<div>
<Form>
<FormGroup>
<ControlLabel>Person</ControlLabel>
<FormControl
onChange={event => this.setState({ person: event.target.value })}
className="input-person"
/>
<ControlLabel>Present</ControlLabel>
<FormControl
onChange={event => this.setState({ present: event.target.value })}
className="input-present"
/>
</FormGroup>
</Form>
<Button
className="btn-remove"
onClick={() => this.props.removeGift(this.props.gift.id)}
>
Remove Gift
</Button>
</div>
);
}
}
从“React”导入React；
从“react”导入{Component}；
进口{
形式，
FormGroup，
FormControl，
控制标签，
按钮
}从“反应引导”；
导出默认类组件{
构造函数（）{
超级（）；
this.state={person:，present:}；
}
render（）{
返回(
人
this.setState（{person:event.target.value}）
className=“输入人”
/>
目前
this.setState（{present:event.target.value}）
className=“当前输入”
/>
this.props.removeGift（this.props.gift.id）}
>
撤礼
);
}
}
并且在使用Jest进行测试时，也会收到与未捕获错误类似的警告。此行的问题：
removeGift = id => {
const gifts = this.state.gifts.filter(gift => gift.id !== id);
this.setState = { ...gifts }; <---------------
};
这里不需要进行扩散操作（…），因为gifts已经是一个数组 您的this.setState错误。请将this.setState={…gives}=>更改为this.setState（{gives}）；除了无效的setState调用，
gives.push（{id:max_id+1}）变异状态。而是像这样创建一个新变量contnewgifts=[…gifts，{id:max\u id+1}]
。然后setState（{gifts:newGifts}）
@Brianthonpson指出，但这不是导致上述错误的原因是的，这可能是个问题，但不是导致此错误的问题。
this.setState({gifts});