Question

我有一个friendsboxes列表，每个friendsbox有一个按钮，应该将分配给朋友的按钮添加到InnerCircle列表中。在friendsDetail组件的addToInnerCircle should add the friend's details to the InnerCircle`列表中。

我的第一个猜测是添加一个InnerCircle数组作为我的用户模型的一部分，然后使此函数addToInnerCircle在单击“添加到内部圆”按钮时添加一个内部圆成员id。之后，我将在ComponentDidMount中进行一个Friends.js并为登录用户并通过Populate get方法获取InnerCircle数组中每个元素的数据（在InnerCircle下的状态为Friends.js下存储+）该特定人员的所有数据。

这样做有意义还是有更好的方法？

Friends.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)
            })
    }

        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}
                                    />
                                </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>

Frienddetail.js

    import React from 'react'
    import './Frienddetail.css'
    
    class InnerCircleDetail 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>
                    </div>
            )
        }
    }
    
    export default InnerCircleDetail

Answer 1

因此，您无需对componentDidMount进行任何操作，因为使用innerCircle中添加的ID更新状态不会触发重新安装，而是触发componentDidUpdate。要渲染innerCircle，您只需渲染一个过滤后的好友，其中id必须与innerCircle中的id匹配。

查看此工作版本： https://codesandbox.io/s/wonderful-http-gin2j?file=/src/ICDetail.js

{friends
    .filter(friend => innerCircle.some(id => id === friend.id))
    .map((friend, index) => {
        return (
           <ICDetail
              key={friend.id}
              friend={friend}
              removeFromIC={() => this.removeFromIC(index)}
           />
        );
   })
}

reactjs-将朋友添加到InnerCircle列表

1 个答案: