在這里反應新手：如何將資料從一個組件匯出到另一個組件？

我有一個組件 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

uj5u.com熱心網友回復：

當您在 getData 函式中從 api 接收資料時更新狀態，并將狀態傳遞給帶有 props 的另一個組件

uj5u.com熱心網友回復：

我將假設該組件將被匯入并在 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。

uj5u.com熱心網友回復：

從您的描述來看，您似乎需要在父組件中維護狀態，以及進行 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>

標籤：javascript 反应 反应道具 使用状态

上一篇：何時使用Boolean(var1)？

下一篇：如何在反應中記住一個函式？