如何在反应中从 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 />)