React function - 未定義 no-undef - 組件集成

Question

很抱歉這個菜鳥問題，但我仍在學習並將拼圖拼湊在一起。

基本上我創建了我的第一個運行良好的反應站點，因為我試圖從其他項目中添加更多組件，但我無法集成它們，因為我不完全確定我在做什么或需要 go 的地方。 我只是想將貨幣計算器添加到其中一個網站頁面，但不完全確定將 prev 工作區中的邏輯放在我的網站中的什么位置？

這是 CurrencyCalculator.js

import React, { Component } from 'react'
import { InfoConsumer } from '../context';
import styled from 'styled-components';
import Reviews from '../Reviews'

function CurrencyCal(props) {
  const {
    currencyOptions,
    selectedCurrency,
    onChangeCurrency,
    onChangeAmount,
    amount
  } = props
};



 class CurrencyCalculator extends Component {
   render() {
    return (
    <InfoConsumer>
      {data => {
        const {
        id,
        headerTitle,
        headerSubTitle,
        headerText,
        img,
        title,
        maps,
        descripton
      } = data.detailInfo;

      return (
        <React.Fragment>
          <HeaderDetails className="container-fluid align-items-center">
          <div>
      <input type="number" className="input" value={amount} onChange={onChangeAmount} />
      <select value={selectedCurrency} onChange={onChangeCurrency}>
        {currencyOptions.map(option => (
          <option key={option} value={option}>{option}</option>
        ))}
      </select>
    </div>
           </HeaderDetails>

        </React.Fragment>
      );
      }}
      </InfoConsumer>
  );
    }
};

export default CurrencyCalculator;



const HeaderDetails = styled.header`
background: linear-gradient(rgba(109,109,109), rgba(255,255,255));
height: 40vh;
text-transform: uppercase;
color: var(--mainWhite);
text-align: center;

h1 {
  padding-top:10%
  color: var(--mainDark);
}

h4 {
  color: var(--mainDark);
}

p {
  padding-left:10%;
  padding-right: 10%;
  margin-bottom: 10%
  color: var(--mainDark);
}


i {
  font-size: 1.875rem;
  color: car(--mainDark);
}

i:hover {
  color: var(--mainBlue);
  cursor: pointer;
}

.nav-item {
  height:18.75rem;4
}

@media(max-width: 760px) {
  h1,h4{
    color: var(--mainWhite);
  }
}
`;

這是在我的 Calculator.js

import React, { useEffect, useState } from 'react';
import './App.css';
import { Header } from './Header'
import CurrencyCalculator from './components/pages/CurrencyCalculator';

const BASE_URL = 'https://api.exchangeratesapi.io/latest'

function CurrencyApp() {
  const [currencyOptions, setCurrencyOptions] = useState([])
  const [fromCurrency, setFromCurrency] = useState()
  const [toCurrency, setToCurrency] = useState()
  const [exchangeRate, setExchangeRate] = useState()
  const [amount, setAmount] = useState(1)
  const [amountInFromCurrency, setAmountInFromCurrency] = useState(true)



  let toAmount, fromAmount
  if(amountInFromCurrency) {
    fromAmount = amount
    toAmount = amount * exchangeRate
  } else {
    toAmount = amount
    fromAmount = amount / exchangeRate
  }

  useEffect(() => {
    fetch(BASE_URL)
      .then(res => res.json())
      .then(data => {
        const firstCurrency = Object.keys(data.rates)[0]
        setCurrencyOptions([data.base, ...Object.keys(data.rates)])
        setFromCurrency(data.base)
        setToCurrency(firstCurrency)
        setExchangeRate(data.rates[firstCurrency])
      })
  }, [])

  useEffect(() => {
    if (fromCurrency != null && toCurrency !=null) {
      fetch(`${BASE_URL}?base=${fromCurrency}&symbols=${toCurrency}`)
      .then(res => res.json())
      .then(data => setExchangeRate(data.rates[toCurrency]))
    }
  }, [fromCurrency, toCurrency])



  function handleFromAmountChange(e) {
    setAmount(e.target.value)
    setAmountInFromCurrency(true)
}

function handleToAmountChange(e) {
  setAmount(e.target.value)
    setAmountInFromCurrency(false)
}


  return (
    <>
    <div className="container"> 
    <div className="header"><Header /></div>
    <h1>Convert</h1> 
    <CurrencyCalculator 
      currencyOptions={currencyOptions}
      selectCurrency={fromCurrency}
      onChangeCurrency={e => setFromCurrency(e.target.value)}
      onChangeAmount={handleFromAmountChange}
      amount={fromAmount}
      />
    <div className='equals'>=</div>
    <CurrencyCalculator 
      currencyOptions={currencyOptions}
      selectedCurrency={toCurrency}
      onChangeCurrency={e => setToCurrency(e.target.value)}
      onChangeAmount={handleToAmountChange}
      amount={toAmount}

      />
      </div>
    </>
  );
}

export default CurrencyApp;

這是我的 Context.js

import React, { Component } from 'react';
import { placeInfo, reviews, detailInfo, news } from '../data'


const InfoContext = React.createContext();


class InfoProvider extends Component {

  state = {
    info: placeInfo,
    reviews: reviews,
    detailInfo: detailInfo,
    news: news
  }

  getItem = id => {
    const item = this.state.info.find(item => item.id ===id);
    return item
  }

  handleDetail = id => {
    const item = this.getItem(id);
    this.setState(() => {
      return {
      detailInfo: item
      }
    });
  };

  render() {
    return (
      <InfoContext.Provider value={{
        info: this.state.info,
        reviews: this.state.reviews,
        detailInfo: this.state.detailInfo,
        news: this.state.news,
        name: this.state.name,
        avatar: this.state.avatar,
        comment: this.state.comment,
        headerText: this.state.headerText,
        headerTitle: this.state.headerTitle,
        maps: this.state.maps,
        headerSubTitle: this.state.headerSubTitle,
        handleDetail: this.handleDetail
      }}>
        {this.props.children}
      </InfoContext.Provider>
    );
  }
}


const InfoConsumer = InfoContext.Consumer;


export { InfoProvider, InfoConsumer };

Package.Json

{
  "name": "latvia",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^4.4.1",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.0",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "styled-components": "^5.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

此代碼無效。 你從哪里得到data屬性？？？

CurrencyCalculator.js

return (
    <InfoConsumer>
      {data => {
        const {
        id,
        headerTitle,
        headerSubTitle,
        headerText,
        img,
        title,
        maps,
        descripton
      } = data.detailInfo;

      return (