在这里反应新手：如何将数据从一个组件导出到另一个组件？答案

【问题标题】：React newbie here: How do I export data from one component to another?在这里反应新手：如何将数据从一个组件导出到另一个组件？
【发布时间】：2021-12-30 02:56:18
【问题描述】：

我有一个 Header.js 组件，它有一个输入和按钮，当我点击按钮时，它会从第三方 API 获取数据。然后我想将响应导出到另一个组件。

Header.js 组件如下：

import React, { useState } from 'react';
import Axios from 'axios';


const Header = () => {

    const [ticker, setTicker] = useState('');

    let url = `https://cloud.iexapis.com/stable/stock/${ticker}/quote?token=${process.env.REACT_APP_API_KEY}`;

    const getData = () => {

        Axios.get(url)
        .then((response) => {
            console.log(response.data);
            return response.data;
        })
        .catch(function(error) {
            console.log(error);
        })
    }

    const handleKeypress = (e) => {
        if(e.keyCode === 13) {
        getData();
        }
    }

    return (
        <div className='header'>
            <h1 id='brand'>Stock Tracker: {ticker}</h1>
                <div className='input-flow'>
                    <input onChange={e => setTicker(e.target.value)}
                    onKeyDown={handleKeypress}
                    className='ticker-input' 
                    type='text' 
                    placeholder='Ticker Symbol' 
                    maxLength='5' minLength='1'/>
                    <button className='add' 
                    onClick={getData}
                    type='submit'>Add</button>
                </div>
        </div>
    )
}

export default Header

【问题讨论】：

标签： javascript reactjs react-props use-state

【解决方案1】：

当您在 getData 函数中从您的 api 接收数据时更新状态并使用 props 将状态传递给您的另一个组件

【讨论】：

【解决方案2】：

我将假设组件将在 Header.js 中导入和呈现。

您可以利用 useState 来保存一个空值，该值将更新为获取的数据。一旦数据可用，您将更新空值的状态，并且可以将该值传递给渲染的组件。

然后，您将可以通过新组件的 props 访问该数据。

    import React, { useState } from 'react';
    import Axios from 'axios';
    import MyComponent from './MyComponent';


const Header = () => {

    const [ticker, setTicker] = useState('');
    const [myData, setMyData] = useState(null);

    let url = `https://cloud.iexapis.com/stable/stock/${ticker}/quote?token=${process.env.REACT_APP_API_KEY}`;

    const getData = () => {

        Axios.get(url)
        .then((response) => {
            console.log(response.data);
            setMyData(response.data)
        })
        .catch(function(error) {
            console.log(error);
        })
    }

    const handleKeypress = (e) => {
        if(e.keyCode === 13) {
        getData();
        }
    }

    return (
        <div className='header'>
            <h1 id='brand'>Stock Tracker: {ticker}</h1>
                <div className='input-flow'>
                    <input onChange={e => setTicker(e.target.value)}
                    onKeyDown={handleKeypress}
                    className='ticker-input' 
                    type='text' 
                    placeholder='Ticker Symbol' 
                    maxLength='5' minLength='1'/>
                    <button className='add' 
                    onClick={getData}
                    type='submit'>Add</button>
                </div>
            {myData && <MyComponent myData={myData} />}
        </div>
    )
}

export default Header

如果组件存在于 Header.js 之外，您可能需要更新公共父组件的状态、使用 Redux 或 Context。

【讨论】：

【解决方案3】：

从您的描述看来，您需要在父组件中维护状态，以及进行 API 调用的处理程序。您将处理程序传递给Header，单击按钮时调用该处理程序。处理程序进行 API 调用，并更新状态。然后在另一个 (Main) 组件中呈现该状态。

const { useState } = React;

function App() {

  const [ data, setData ] = useState([]);

  function handleClick() {
    // Simulated fetch statement - returns data
    const data = [{ id: 1, name: 'Bob' }, { id: 2, name: 'John' }];
    setData(data);
  }

  return (
    <div>
      <Header handleClick={handleClick} />
      <Main data={data} />
    </div>
  );
};

function Header({ handleClick }) {
  return (
    <button
      type="button"
      onClick={handleClick}
    >Get data
    </button>
  );
}

function Main({ data }) {
  return data.map(obj => {
    return <div key={obj.id}>{obj.name}</div>
  });
}

ReactDOM.render(
  <App />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

【讨论】：