Reactjs 在React中将数据从父组件发送到子组件

我是新手，需要一些帮助。我正在使用Axios从RESTAPI获取数据。我有两个部分。父组件和子组件。在父组件中，我从具有多条记录的API中获取汇总数据，而子组件用于在用户单击父组件中的特定记录时调用另一个API以获取记录的详细信息。 父组件有3个属性（文档编号、文档类型和审批人）。当用户单击按钮时，我需要将“Doc Number”和“Doc Type”值传递给子组件API URl

注意：我在父API响应中没有任何专用的ID属性，这就是我使用索引作为键的原因

这是我的父组件

import React, { Component } from "react";
import axios from "axios";
import Getdetails from "./Getdetails";
class Parent extends Component {
constructor(props) {
    super(props);
    this.state = {
      records: [],
      errorMessage: "",
    };
  }

  componentDidMount() {
    axios
      .get( "http://www.example.Api.com/generalInfo&limit=10&offset=2" )
      .then((res) => {
        this.setState({ records: res.data });
        console.log(res);
      })
  }

render() {
    const { records } = this.state;
    return (
        <div>
          <ul>
            {records.map((record, index) => (
              <li key={index}>
                Document Number : {record.Number}
                Document Type: {record.documentType}
                Approver : {record.approver} 
                //I Want to send the "document Number & documentType" to Childdetails component Url when user click on this button. 
                <button onClick={{record.Number} & {record.documentType}}>Get Details</button> 
              </li>
            ))}
          </ul>
        </div>
      )
}
}
export default Parent;

import React, { Component } from "react";
import axios from "axios";
import Parent from "Parent";

class ChildDetails extends Component {

    constructor(props) {
        super(props);
    
        this.state = {
          getdetails: [],
          errorMessage: "",
        };
      }

      componentDidMount() {
        axios
          .get("http://www.example-Details-API.com/documentType={record.documentType}/id={record.Number}")
          .then((res) => {
            this.setState({ getdetails: res.data });
            console.log(res);
          })
      }

    render() {
        const { getdetails } = this.state;
        return (
            <div>
                <h1>Get Details</h1>
                <ul>
                  <li> Number : {getdetails.Number} </li>
                  <li> Title : {getdetails.Title} </li>
                  <li> Submit Date : {getdetails.Date} </li>
                  <li> Site : {getdetails.site} </li>
                 <li> Requester : {getdetails.requesterName}</li>
                 <li> document Type : {getdetails.documentType}</li>
              </ul>

            </div>
        )
    }
}

export default ChildDetails

import React，{Component}来自“React”；
从“axios”导入axios；
从“/Getdetails”导入Getdetails；
类父级扩展组件{
建造师（道具）{
超级（道具）；
此.state={
记录：[]，
错误消息：“”，
};
}
componentDidMount（）{
axios
.get（“http://www.example.Api.com/generalInfo&limit=10&offset=2" )
。然后（（res）=>{
this.setState（{records:res.data}）；
控制台日志（res）；
})
}
render（）{
const{records}=this.state；
返回(

{records.map（（记录，索引）=>(

文件编号：{record.Number}
文档类型：{record.documentType}
批准人：{record.Approver}
//当用户单击此按钮时，我想将“文档编号和文档类型”发送到Childdetails组件Url。
获取详细信息

))}

)
}
}
导出默认父对象；

这是我的子组件

import React, { Component } from "react";
import axios from "axios";
import Getdetails from "./Getdetails";
class Parent extends Component {
constructor(props) {
    super(props);
    this.state = {
      records: [],
      errorMessage: "",
    };
  }

  componentDidMount() {
    axios
      .get( "http://www.example.Api.com/generalInfo&limit=10&offset=2" )
      .then((res) => {
        this.setState({ records: res.data });
        console.log(res);
      })
  }

render() {
    const { records } = this.state;
    return (
        <div>
          <ul>
            {records.map((record, index) => (
              <li key={index}>
                Document Number : {record.Number}
                Document Type: {record.documentType}
                Approver : {record.approver} 
                //I Want to send the "document Number & documentType" to Childdetails component Url when user click on this button. 
                <button onClick={{record.Number} & {record.documentType}}>Get Details</button> 
              </li>
            ))}
          </ul>
        </div>
      )
}
}
export default Parent;

import React, { Component } from "react";
import axios from "axios";
import Parent from "Parent";

class ChildDetails extends Component {

    constructor(props) {
        super(props);
    
        this.state = {
          getdetails: [],
          errorMessage: "",
        };
      }

      componentDidMount() {
        axios
          .get("http://www.example-Details-API.com/documentType={record.documentType}/id={record.Number}")
          .then((res) => {
            this.setState({ getdetails: res.data });
            console.log(res);
          })
      }

    render() {
        const { getdetails } = this.state;
        return (
            <div>
                <h1>Get Details</h1>
                <ul>
                  <li> Number : {getdetails.Number} </li>
                  <li> Title : {getdetails.Title} </li>
                  <li> Submit Date : {getdetails.Date} </li>
                  <li> Site : {getdetails.site} </li>
                 <li> Requester : {getdetails.requesterName}</li>
                 <li> document Type : {getdetails.documentType}</li>
              </ul>

            </div>
        )
    }
}

export default ChildDetails

import React，{Component}来自“React”；
从“axios”导入axios；
从“父项”导入父项；
类ChildDetails扩展组件{
建造师（道具）{
超级（道具）；
此.state={
getdetails:[]，
错误消息：“”，
};
}
componentDidMount（）{
axios
.get（“http://www.example-Details-API.com/documentType={record.documentType}/id={record.Number}”）
。然后（（res）=>{
this.setState（{getdetails:res.data}）；
控制台日志（res）；
})
}
render（）{
const{getdetails}=this.state；
返回(
获取详细信息

编号：{getdetails.Number}
标题：{getdetails.Title}
提交日期：{getdetails.Date}
站点：{getdetails.Site}
请求者：{getdetails.requesterName}
文档类型：{getdetails.documentType}

)
}
}
导出默认儿童详细信息

---

感谢所有人，非常感谢您的帮助。

将数据作为道具传递给子组件

  const onClickHandler = (record,document)  => {
     return (
      <ChildDetails recordNumber={record} documentType={document}/>
      )
    };
    

constonclickhandler=（记录、文档）=>{
返回(
)
};

将数据作为参数传递给事件处理程序

    <button onClick={onClickHanlder(record.Number,record.documentType)}>Get Details</button>

获取详细信息

---

如果您想使用索引，您可以将其用作第三个参数t

当您谈论父组件和子组件时，我希望看到父组件渲染的子组件，我不确定这是否是您的情况。无论如何，将数据从父母传递给孩子的主要方式是通过道具。适用于您的示例：

componentDidMount() {
        const docNumber = this.props.selectDocNumber 
        const docType = this.props.selectedDocType 
        axios
          .get(`http://www.example-Details-API.com/documentType=${docType}/id=${docNumber}`)
          .then((res) => {
            this.setState({ getdetails: res.data });
            console.log(res);
          })
      }

在父级的渲染函数中：

<ChildDetails record={record} />

componentDidMount() {
    axios
      .get(`http://www.example-Details-API.com/documentType=${props.record.documentType}/id=${props.record.Number}`)
      .then((res) => {
        this.setState({ getdetails: res.data });
        console.log(res);
      })
  }

请注意，在子系统中，数据是通过props.record访问的

---

如果父级未呈现ChildDetails，则需要通过回调将信息传递给上级。

您可以在父级组件中再添加两个状态值，例如：

this.state = {
      records: [],
      errorMessage: "",
      Selected-Doc-Number: ""
      Selected-Doc-Type: ""
    };

现在，您可以通过单击父组件上的记录按钮将这些状态值（

所选单据编号

，

所选单据类型

）设置为：

const selectRecordForChildComponent = (selectedDocNumber, selectedDocType) => {
      this.setState({Selected-Doc-Number: selectedDocNumber, 
                     Selected-Doc-Type: selectedDocType})
}

<button 
onClick={() => {selectRecordForChildComponent(record.Number, record.documentType)}}>
Get Details
</button> 

现在，您可以在

组件中使用

道具访问这些传递的道具，例如：

componentDidMount() {
        const docNumber = this.props.selectDocNumber 
        const docType = this.props.selectedDocType 
        axios
          .get(`http://www.example-Details-API.com/documentType=${docType}/id=${docNumber}`)
          .then((res) => {
            this.setState({ getdetails: res.data });
            console.log(res);
          })
      }

希望这可以帮助…
在父组件onClick中创建一个将被调用的函数，并将道具返回给子组件

this.handleClick（record.number，record.documentType）}>获取详细信息

手柄点击功能应该是这样的

handleClick（num，type）{
返回(
)
};

不要忘记在构造函数中绑定函数。然后，您可以在子组件的did mount函数中调用外部API，并使用来自父组件的所需道具替换url，如上面的示例this.props.recordNum和this.props.docType。
您必须将该数据作为道具传递给子组件，当然，还必须在父组件的呈现中添加子组件要使用的道具。比如说Hi@pmiranda。谢谢你的回复。我在API的响应中没有稳定的Id属性&这就是我使用索引的原因。我如何将该特定记录引用到子组件。你能给我看一下上面部分的代码片段吗？谢谢，有没有正确的答案？嗨，Mohd Zeefan。如何在构造函数中绑定函数？this.handleClick=this.handleClick.bind（this）@RazaThanks alot@Abhay Kumar为您奉献时间和精力