Javascript 提升状态-this.state.friends突然未定义
我试图理解为什么每次单击“添加到内圈按钮”（在Frienddetail.js中）时都会出现此错误。我使用道具将状态从Frienddetail提升到Frienddetail：Javascript 提升状态-this.state.friends突然未定义,javascript,reactjs,Javascript,Reactjs,我试图理解为什么每次单击“添加到内圈按钮”（在Frienddetail.js中）时都会出现此错误。我使用道具将状态从Frienddetail提升到Frienddetail： addToInnerCircle [as innerCircle] C:/Users/charl/Desktop/IRONHACK/Week-9/finalproject/client/src/pages/Friends.js:64 61 | } 62 | 63 | addToInnerCircle
addToInnerCircle [as innerCircle]
C:/Users/charl/Desktop/IRONHACK/Week-9/finalproject/client/src/pages/Friends.js:64
61 | }
62 |
63 | addToInnerCircle(idclicked){
> 64 | console.log("hallo")
| ^ 65 | let idpicked = this.state.friends
66 | // .filter(friend => friend._id === idclicked)
67 | console.log("Charles")
App.js
import React from 'react'
import DefaultLayout from "../layout/Default"
import './Friends.css'
import Axios from 'axios'
import Frienddetail from '../components/Frienddetail'
import InnerCircleDetail from '../components/InnerCircleDetail'
import { getUser } from '../utils/auth'
class Friendsfollowers extends React.Component {
constructor() {
super()
this.state = {
friends: [],
searchFriends: [],
innerCircle: [],
searchInnerCircle: []
}
this.searchFriends=this.searchFriends.bind(this)
}
componentDidMount(){
Axios({
method: "GET",
url: `${process.env.REACT_APP_API_BASE}/friends`,
withCredentials: true
})
.then(response =>{
console.log(response)
let friendslist = response.data // eslint-disable-next-line
let friendslistupdate = friendslist.filter(friend => {
if(friend.username){
if(friend.username !== getUser().username){
return true
}
}
})
this.setState({
friends: friendslistupdate,
searchFriends: friendslistupdate
})
})
.catch(error =>{
console.log("Charles made an error when retrieving all friends: ",error)
})
}
searchFriends(e){
console.log(getUser)
let friendsearched = this.state.friends.filter(friend => {
if(friend.username){
if(friend.username.toLowerCase().includes(e.target.value.toLowerCase())){
return true
}
}
})
this.setState({
searchFriends:friendsearched
})
}
addToInnerCircle(idclicked){
console.log("hallo")
let idpicked = this.state.friends
// .filter(friend => friend._id === idclicked)
console.log("Charles")
console.log(idpicked)
console.log("Charles")
}
render() {
return (
<DefaultLayout>
<div className="friendsoverviewcontainer">
<h1>Our community</h1>
<form className="friends">
<div className="titlepart">
<label className="friendlabel" htmlFor="friend">Search for Users :</label><br></br>
<input className="friendform" type="text" name="friend" value={this.state.friend} placeholder="Type a username here!" onChange={this.searchFriends}></input>
</div>
</form>
<div className="friendsboxes" >
{
this.state.searchFriends.map(friend =>
<div key={friend._id}>
<Frienddetail
key={friend._id}
id={friend._id}
username={friend.username}
location={friend.location}
innerCircle={this.addToInnerCircle}
/>
</div>
)
}
</div>
</div>
<div className="innercirclecontainer">
<h1>Your inner circle</h1>
<div className="innercircleboxes">
{
this.state.searchInnerCircle.map(inner =>
<div key={inner._id}>
<InnerCircleDetail
key={inner._id}
id={inner._id}
username={inner.username}
location={inner.location}
/>
</div>
)
}
</div>
</div>
</DefaultLayout>
)
}
}
export default Friendsfollowers
import React from 'react'
import './Frienddetail.css'
class Frienddetail extends React.Component {
constructor() {
super()
this.state = {
}
}
render() {
return (
<div className="friendbox">
<img className="imagedaredevilspicdetail" src="/images/profileimage.png" alt="picturesetting" />
<p className="friend">{this.props.username}</p>
<p className="friend">{this.props.location}</p>
<button className="followbutton">Follow user!</button>
<button className="friendbutton" onClick={(e)=> this.props.innerCircle(this.props.id)}>Add to inner circle!</button>
</div>
)
}
}
export default Frienddetail
从“React”导入React
从“./layout/Default”导入默认布局
导入“./Friends.css”
从“Axios”导入Axios
从“../components/Frienddetail”导入Frienddetail
从“../components/InnerCircleDetail”导入InnerCircleDetail
从“../utils/auth”导入{getUser}
类Friendsfollowers扩展了React.Component{
构造函数（）{
超级（）
此.state={
朋友们：[]，
searchFriends:[]，
内圈：[]，
searchInnerCircle:[]
}
this.searchFriends=this.searchFriends.bind（this）
}
componentDidMount（）{
Axios({
方法：“获取”，
url:“${process.env.REACT\u APP\u API\u BASE}/friends`，
证书：正确
})
。然后（响应=>{
console.log（响应）
让friendslist=response.data//eslint禁用下一行
让friendslistupdate=friendslist.filter（friendslist=>{
if（friend.username）{
if（friend.username！==getUser（）.username）{
返回真值
}
}
})
这是我的国家({
朋友：Friendslipslipsdate，
搜索好友：Friendslipstupdate
})
})
.catch（错误=>{
log（“Charles在检索所有好友时出错：”，错误）
})
}
搜索好友（e）{
console.log（getUser）
让Friendsearch=this.state.friends.filter（friend=>{
if（friend.username）{
if（friend.username.toLowerCase（）.includes（e.target.value.toLowerCase（）））{
返回真值
}
}
})
这是我的国家({
搜索好友：搜索好友
})
}
addToInnerCircle（单击的ID）{
控制台日志（“你好”）
让IDpicke=this.state.friends
//.filter（friend=>friend.\u id===idclicked）
控制台日志（“Charles”）
控制台日志（idpicked）
控制台日志（“Charles”）
}
render（）{
返回(
我们的社区
搜索用户：
{
this.state.searchFriends.map（friend=>
)
}
你的核心圈子
{
this.state.searchInnerCircle.map（内部=>
)
}
)
}
}
导出默认的Friendsfollowers
Frienddetail.js
import React from 'react'
import DefaultLayout from "../layout/Default"
import './Friends.css'
import Axios from 'axios'
import Frienddetail from '../components/Frienddetail'
import InnerCircleDetail from '../components/InnerCircleDetail'
import { getUser } from '../utils/auth'
class Friendsfollowers extends React.Component {
constructor() {
super()
this.state = {
friends: [],
searchFriends: [],
innerCircle: [],
searchInnerCircle: []
}
this.searchFriends=this.searchFriends.bind(this)
}
componentDidMount(){
Axios({
method: "GET",
url: `${process.env.REACT_APP_API_BASE}/friends`,
withCredentials: true
})
.then(response =>{
console.log(response)
let friendslist = response.data // eslint-disable-next-line
let friendslistupdate = friendslist.filter(friend => {
if(friend.username){
if(friend.username !== getUser().username){
return true
}
}
})
this.setState({
friends: friendslistupdate,
searchFriends: friendslistupdate
})
})
.catch(error =>{
console.log("Charles made an error when retrieving all friends: ",error)
})
}
searchFriends(e){
console.log(getUser)
let friendsearched = this.state.friends.filter(friend => {
if(friend.username){
if(friend.username.toLowerCase().includes(e.target.value.toLowerCase())){
return true
}
}
})
this.setState({
searchFriends:friendsearched
})
}
addToInnerCircle(idclicked){
console.log("hallo")
let idpicked = this.state.friends
// .filter(friend => friend._id === idclicked)
console.log("Charles")
console.log(idpicked)
console.log("Charles")
}
render() {
return (
<DefaultLayout>
<div className="friendsoverviewcontainer">
<h1>Our community</h1>
<form className="friends">
<div className="titlepart">
<label className="friendlabel" htmlFor="friend">Search for Users :</label><br></br>
<input className="friendform" type="text" name="friend" value={this.state.friend} placeholder="Type a username here!" onChange={this.searchFriends}></input>
</div>
</form>
<div className="friendsboxes" >
{
this.state.searchFriends.map(friend =>
<div key={friend._id}>
<Frienddetail
key={friend._id}
id={friend._id}
username={friend.username}
location={friend.location}
innerCircle={this.addToInnerCircle}
/>
</div>
)
}
</div>
</div>
<div className="innercirclecontainer">
<h1>Your inner circle</h1>
<div className="innercircleboxes">
{
this.state.searchInnerCircle.map(inner =>
<div key={inner._id}>
<InnerCircleDetail
key={inner._id}
id={inner._id}
username={inner.username}
location={inner.location}
/>
</div>
)
}
</div>
</div>
</DefaultLayout>
)
}
}
export default Friendsfollowers
import React from 'react'
import './Frienddetail.css'
class Frienddetail extends React.Component {
constructor() {
super()
this.state = {
}
}
render() {
return (
<div className="friendbox">
<img className="imagedaredevilspicdetail" src="/images/profileimage.png" alt="picturesetting" />
<p className="friend">{this.props.username}</p>
<p className="friend">{this.props.location}</p>
<button className="followbutton">Follow user!</button>
<button className="friendbutton" onClick={(e)=> this.props.innerCircle(this.props.id)}>Add to inner circle!</button>
</div>
)
}
}
export default Frienddetail
从“React”导入React
导入“./Frienddetail.css”
类Frienddetail扩展了React.Component{
构造函数（）{
超级（）
此.state={
}
}
render（）{
返回(
{this.props.username}
{this.props.location}
跟随用户！
this.props.innerCircle（this.props.id）}>添加到内圈！
)
}
}
导出默认Frienddetail
import React from "react";
class Test extends React.Component {
constructor(props) {
super(props);
this.state = {
id: props.id
};
}
handleClick = () => {
this.props.innerCircle(this.state.id);
};
render() {
return <button onClick={this.handleClick}>Click</button>;
}
}
export default Test;
从“React”导入React；
类测试扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
id:props.id
};
}
handleClick=（）=>{
this.props.innerCircle（this.state.id）；
};
render（）{
返回单击；
}
}
导出默认测试；
Lemmi知道这是否有效要在回调函数中使用它，您需要绑定它或react将“this”解释为窗口对象，而不是类的实例，并且窗口对象没有状态变量，因此this.state是未定义的。您为searchFriends函数所做的是，您需要对addToInnerCircle执行相同的操作，或者我喜欢使用的一种更好的方法，它没有绑定问题，就是使用箭头函数语法，只需转换addToInnerCircle int即可