在 React 中將狀態數據從一個組件傳遞到另一個組件

Question

我有兩個組件，一個用於從兩個輸入字段獲取 JSON 數據，另一個用於顯示收集的數據並將其用於不同目的。 從 JSON 文件中獲取數據后，我將它們設置為第一個組件的狀態。

我的問題是如何將在第一個組件中獲得的數據發送到另一個組件，以便我可以在第二個組件中以表格的形式顯示數據。

第一個組件：

export class comp extends Component {
    constructor(props) {
        super(props);
        this.state = {
            uploadfile1:null,
            uploadfile2:null
        }
        this.readFile = this.readFile.bind(this);
       
    }

    readFile(e) {

        {/*Reading JSON Files*/}

        const file = e.target;
        const fileId = file.id;

        if (/\.(json)$/i.test(file.files[0].name) === false) {
            alert("Not valid JSON file!");
        } 
        else {
            const fileReader = new FileReader();
            fileReader.readAsText(file.files[0], "UTF-8");

            fileReader.onload = () => {
                console.log(fileReader.result);
                const data = JSON.parse(fileReader.result);
              
                this.setState({
                    ['upload' + fileId]: data
                })
            };
        } 
    }
    
    render() {
        return (
            <div className="new-audit-content-wrapper">
               
                <input onChange={this.readFile} type="file" id="file1" className="inputfile"/>
                <label htmlFor="file1">Browse for files</label>

                <input onChange={this.readFile} type="file" id="file2" className="inputfile"/>
                <label htmlFor="file2">Browse for files</label>
                          
            </div>
        )
    }
}

第二個組件；

export class table extends Component {
    render() {
        return (
            <div className="wrapper">
                       
                        <thead className="table-head">
                            <tr className="table-head-cols">
                                <th className="col-1">Seq#</th>
                                <th className="col-2">Data Audit Row #</th>
                            </tr>
                        </thead>

                        <tbody className="table-body">
                            <tr className="table-body-cols">
                                <td className="table-body-col-1">1</td>
                                <td className="table-body-col-2">3</td>
                            </tr>
                            
                        </tbody>
                         
            </div>
        )
    }
}

我只需要使用 Props 將數據從第一個組件狀態傳遞到第二個組件？ 我不知道確切的解決方案，因為我是新手。

謝謝

Answer 1

您需要將數據作為道具傳遞，並將“第二個組件”作為“第一個組件”的子組件。

render() {
        return (
            <div className="new-audit-content-wrapper">
               
                <input onChange={this.readFile} type="file" id="file1" className="inputfile"/>
                <label htmlFor="file1">Browse for files</label>

                <input onChange={this.readFile} type="file" id="file2" className="inputfile"/>
                <label htmlFor="file2">Browse for files</label>
                
                {/* Add the table below, similar to the example */}
                <Table data={this.state.uploadFile1} />
                     
            </div>
        )
    }

我不知道你是否在遵循一個例子，但你已經直覺地走（或開始走......）進入一個模式： https : //medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

Answer 2

您可以將函數作為道具發送並使用它來更新父組件中的數據。 看這個例子：

父.JSX

import React, { useState } from 'react';
import Child from './Child'

export default () => {

  const [updateValue, setUpdateValue] = useState('Initial Value')

  const parentFunction = (e) => {
    console.log(e.target.value)
    setUpdateValue(e.target.value)
  }

  return (
    <>
      <h1>{updateValue}</h1>
      <Child parentData="Parent Data" updateValue={parentFunction} />
    </>
  )
}

兒童.jsx

import React from 'react';

export default ({parentData, updateValue}) => {
  return (
    <>
      <h2>{parentData}</h2>
      <input type="text" onChange={(e) => updateValue(e)} />
    </>
  )
}

Answer 3

將您的第二個組件更改為功能組件，從 props 接收數據，並使用數據來呈現您的標記：

export function Table (props) {
const {data} = props
  
        return (
            <div className="wrapper">
                       
                        <thead className="table-head">
                            <tr className="table-head-cols">
                                <th className="col-1">Seq#</th>
                                <th className="col-2">Data Audit Row #</th>
                            </tr>
                        </thead>

                        <tbody className="table-body">
                      {/* You can use your data here to render the table rows */}
                            <tr className="table-body-cols">
                                <td className="table-body-col-1">1</td>
                                <td className="table-body-col-2">3</td>
                            </tr>
                            
                        </tbody>
                         
            </div>
        )
    
}

在你的第一個組件中，導入你的第二個組件

import Table from "../component/Table"

export class comp extends Component {
    constructor(props) {
        super(props);
        this.state = {
            uploadfile1:null,
            uploadfile2:null
        }
        this.readFile = this.readFile.bind(this);
       
    }

    readFile(e) {

        {/*Reading JSON Files*/}

        const file = e.target;
        const fileId = file.id;

        if (/\.(json)$/i.test(file.files[0].name) === false) {
            alert("Not valid JSON file!");
        } 
        else {
            const fileReader = new FileReader();
            fileReader.readAsText(file.files[0], "UTF-8");

            fileReader.onload = () => {
                console.log(fileReader.result);
                const data = JSON.parse(fileReader.result);
              
                this.setState({
                    ['upload' + fileId]: data
                })
            };
        } 
    }
    
    render() {
        return (
            <div className="new-audit-content-wrapper">
               
                <input onChange={this.readFile} type="file" id="file1" className="inputfile"/>
                <label htmlFor="file1">Browse for files</label>

                <input onChange={this.readFile} type="file" id="file2" className="inputfile"/>
                <label htmlFor="file2">Browse for files</label>

                 <Table data={this.state.data} />
            </div>
        )
    }
}

Answer 4

是的。 您可以將數據作為道具傳遞，或者您可以使用諸如反應鈎子之類的東西來傳遞數據。 反應鈎子 => https://reactjs.org/docs/hooks-intro.html

Answer 5

正如 Zac 所說，React 團隊推薦的解決方案是最安全的方法，即調用第二個組件作為父/第一個組件的子組件，或者如果您有一個 ENTRY 組件，則將 Read json 狀態從它們傳遞給子組件。 謝謝