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

问题描述

我试图理解为什么每当单击“添加到内圈按钮”时出现此错误（在 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 但我不明白为什么？

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

应用程序.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

标签： javascriptreactjs

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

问题描述

解决方案

推荐阅读