如何在反應中從 json 單擊事件數組中獲取值

Question

我有一個從 API 顯示的數據列表，單擊時會顯示相關數據，例如作者列表，其中顯示了他們在單擊后撰寫的論文。 由於數據庫限制，我需要從點擊作者時顯示的論文中獲取論文 ID 值。

有人知道怎么做這個嗎？ 獲取的數據

Paper.js

import React from "react";
import AuthorsNoClick from './authorsNoClick';


class Paper extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            display: false
        }
    }

    handleClick = () => {
        this.setState({display:!this.state.display})
    }

    render() {
        let details ="";
        if (this.state.display){
            details = 
            <div>
                <p>Abstract</p>
                <p>{this.props.paper.abstract}</p>
                
                <AuthorsNoClick paperid={this.props.paper.paper_id}/>

                
            </div>
        } 
        return ( 
            <div onClick={this.handleClick}>
                <p>{this.props.paper.title}</p>
                {details}
            </div>
         );
    }
}
 
export default Paper;

作者NoClick.js

import React from "react";

class AuthorNoClick extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            display: false
        }
    }

    render() {

        

        return(
            <div>
            <p>{this.props.author.first_name + ' ' + this.props.author.last_name}</p>

            </div>
        )
    }   
}

export default AuthorNoClick;

作者NoClick.js

import React from 'react';
import AuthorNoClick from './authorNoClick';


class AuthorsNoClick extends React.Component {
    constructor(props){
        super(props)
        this.state = { results : [] } // declaring state
        console.log("constructor");
    }
    
    componentDidMount() {
        let url = "http://localhost/api/authors";

        if (this.props.paperid !== undefined){
            url += "?paperid=" + this.props.paperid;
        } 
        
        
    
        
        fetch(url)
        .then((response) => {
            
            if (response.status === 200) {
                return response.json() 
              } else {
                throw Error(response.statusText);
              }
        })
        .then((data) => {
            this.setState({results:data})
        })
        .catch((err) => {
            console.log("something went wrong", err)
        })
        console.log("mounted")
    }
    render() {
        console.log("render");
        console.log(this.state.results);
        return (

            <div>       
                <p>Authors: </p>                                   
                {this.state.results.map( (author, i) => (<AuthorNoClick key={i} author={author} />) )}
            </div>
                
        )
    }
}
 
export default AuthorsNoClick; 

論文.js

class Papers extends React.Component {
    constructor(props){
        super(props)
        this.state = { results : [] } // declaring state
        console.log("constructor");
    }
    
    componentDidMount() {
        let url = "http://localhost/api/papers";

        if (this.props.author_id !== undefined){
            url += "?authorid=" + this.props.author_id;
        }
 

        fetch(url)
        .then((response) => {
            if (response.status === 200) {
                return response.json() 
              } else {
                throw Error(response.statusText);
              }
            
        })
        .then((data) => {
            this.setState({results:data})
        })
        .catch((err) => {
            console.log("something went wrong", err)
        })
        console.log("mounted")
    }
    render() {
        console.log("render");
        console.log(this.state.results);
        
        return (
            
            <div>
                {this.state.results.map( (paper, i) => (<Paper key={i} paper={paper}/>) )}
            </div>
                
        )
    }
}
 
export default Papers;

Answer 1

有很多方法可以實現，有幾個步驟要做：（我會寫函數式組件，但邏輯是一樣的）

1. 在 Author 組件中添加一個 id 道具，這樣您將識別組件<Author id={author.id}/>

2. 獲取整個作者列表后，您需要為所選用戶創建一個點擊處理程序和一個不同的 state

    const handleAuthor = (e) => { setSelectedAuthor(e.target.id)}

3. 將 ID 保存在新的 state 中后，您可以使用 Array.filter() 顯示僅與您在 state 中的 ID 匹配的帖子

authors.filter(author => author.id === selectedAuthor.id && <Author />)