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

Question

我是新手，需要一些帮助。我正在使用 Axios 从 REST API 获取数据。我有两个组件。父子组件。在父组件中，我从具有多条记录的 API 获取汇总数据，而当用户单击父组件中的特定记录时，子组件用于对记录的详细信息进行另一个 API 调用。 父组件有 3 个属性（ Document-Number, document-Type & Approver ）。当用户单击按钮时，我需要将“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

感谢大家，非常感谢您的帮助。

Answer 1

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

在父级的渲染函数中：

<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 没有被 Parent 渲染，那么你需要通过回调将信息传递给上层。

Answer 2

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

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

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

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

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

Answer 3

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

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

现在您可以在单击父组件上的记录按钮时将这些状态值（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> 

现在您可以使用父组件中的道具将这些值（Selected-Doc-Number、Selected-Doc-Type）传递给子组件：

<ChildDetails 
selectDocNumber = {this.state.Selected-Doc-Number} 
selectedDocType = {this.state.Selected-Doc-Type} />

现在您可以使用 props 组件在 <ChildDetails> 组件中访问这些传递的道具，例如：

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);
          })
      }

希望这可能会有所帮助...

Answer 4

在父组件的onClick中创建一个函数，该函数将被调用并将props返回给子组件。

<button onClick={() => this.handleClick(record.number, record.documentType)}>Get Details</button>

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

handleClick(num, type) {
   return (
      <Child recordNum={num} docType={type}></Child>
   )
};

不要忘记在构造函数中绑定函数。然后，您可以在子组件的 did mount 函数中调用外部 API，并将 url 替换为父组件所需的道具，如上面的示例 this.props.recordNum 和 this.props.docType。