提升状态 - this.state.friends 突然未定义答案

【问题标题】：Lifting state up - this.state.friends suddenly undefined提升状态 - this.state.friends 突然未定义
【发布时间】：2020-07-05 03:02:29
【问题描述】：

我试图了解为什么每当单击“添加到内圈按钮”时出现此错误（在 Frienddetail.js 中）。我正在使用道具将状态从 Frienddetail 提升到 Friends：

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")

let idpicked = this.state.friends => 给出 undefined 但我不明白为什么？

看起来您的帖子主要是代码；请添加更多详细信息。看起来您的帖子主要是代码；请添加更多详细信息。看起来您的帖子主要是代码；请添加更多详细信息。看起来您的帖子主要是代码；请添加更多详细信息。看起来您的帖子主要是代码；请添加更多详细信息。看起来您的帖子主要是代码；请添加更多详细信息。看起来您的帖子主要是代码；请添加更多详细信息。看起来您的帖子主要是代码；请添加更多详细信息。看起来您的帖子主要是代码；请添加更多详细信息。看起来您的帖子主要是代码；请添加更多详细信息。看起来您的帖子主要是代码；请添加更多详细信息。看起来您的帖子主要是代码；请添加更多详细信息。看起来您的帖子主要是代码；请添加更多详细信息。看起来您的帖子主要是代码；请添加更多详细信息。看起来您的帖子主要是代码；请添加更多详细信息。看起来您的帖子主要是代码；请添加更多详细信息。

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

Frienddetail.js

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

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

为了能够在回调函数中使用 this，您需要绑定它或 react 将“this”解释为窗口对象而不是类的实例，并且窗口对象没有状态变量，因此 this.state 是未定义的。你为你的 searchFriends 函数所做的你需要对 addToInnerCircle 做同样的事情，或者我喜欢使用没有绑定问题的更好的方法是使用箭头函数语法，只需将你的 addToInnerCircle 转换为箭头函数。

阅读更多关于 react js 文档处理事件的信息

【讨论】：

【解决方案2】：

尝试像这样使用它

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;

在您的 Frienddetail 组件中。

Lemmi 知道这是否有效

【讨论】：