2

这看起来应该很容易，但是为什么带有 setState 调用的按钮回调函数不会触发数据项的刷新？实际上，当按钮被选中时，只是不会更改 sma 的 computeSMA 按钮。设置输入的其他两个回调起作用。fetchData 更新图表，所以我无法弄清楚！一定是太累了……

import React, { useState, useEffect } from "react"
import { useRecoilState } from "recoil";
import { closingDataAtom, metaDataAtom, tickerAtom, timeSeriesAtom , smaAtom} from '../../utils/atoms'
import { Container } from '@material-ui/core'
import '../../utils/Home.css'
import { VictoryChart, VictoryBar, VictoryTheme, VictoryVoronoiContainer, VictoryLine, VictoryBrushContainer, VictoryZoomContainer } from 'victory';
import { Chart, Axis, Tooltip, Line, Point } from "bizcharts";
import {XYPlot, LineSeries} from 'react-vis';






const APIKEY = 'demo'


const Home = () => {

  const [apikey, setApiKey] = useState(APIKEY)
  const [ticker, setTicker] = useRecoilState(tickerAtom);
  const [metadata, setMetaData] = useRecoilState(metaDataAtom)
  const [closingdata, setClosingData] = useRecoilState(closingDataAtom)
  const [dates, setDates] = useRecoilState(timeSeriesAtom)
  const [sma, setSMA] = useRecoilState(smaAtom)
  const TIME_RESOLUTION = 'Daily'
  var requestUrl

  if (TIME_RESOLUTION === 'Daily') {
    requestUrl = "https://www.alphavantage.co/query?function=TIME_SERIES_DAILY_ADJUSTED&symbol=" + ticker + "&outputsize=full&apikey=" + apikey
  } else {
    requestUrl = "https://www.alphavantage.co/query?function=TIME_SERIES_WEEKLY_ADJUSTED&symbol=" + ticker + "&outputsize=full&apikey=" + apikey;
  }

  const fetchData = async () => {
    fetch(requestUrl)
      .then(response => response.json())
      .then(data => {
        var closing_price = []
        var metadata = []
        var dat = []
        Object.keys(data['Time Series (Daily)']).forEach((dateKey) => {
          closing_price.push(data['Time Series (Daily)'][dateKey]['5. adjusted close'])
          dat.push({ 'date': new Date(dateKey) })
        })
        Object.keys(data['Meta Data']).forEach((metaKey) => {
          metadata.push(data['Meta Data'][metaKey])
        })
        setDates(dat.reverse())
        setClosingData(closing_price.reverse())
        setMetaData(metadata)

      })
      .catch(e => {
     
      });
  };

  const handleSMACompute = (e) => {
      var sm = ['2', '3', '4']
      setSMA(sm)  <====== REACT IS NOT "REACTING"    
}

  
  const handleTickerInput = (e) => {
    setTicker(e.target.value)

  }

  const handleAPIInput = (e) => {
    setApiKey(e.target.value)
  }

  return (
    <>
      <Container className="container" maxWidth="sm">

        <div>
          <label>Ticker:</label> {ticker}
          <input type="text" name="ticker" onChange={handleTickerInput} />
        </div>
        <div>
          <label>APIKEY:</label> {apikey}
          <input type="text" name="apikey" onChange={handleAPIInput} />
        </div>

        <button onClick={fetchData}>
          Click it
            </button>
        <Container className="container" maxWidth="sm">
          <ul>{metadata}</ul>
        </Container>

        
          <button OnClick={handleSMACompute}> Generate  SMA    </button>
          <Container className="container" maxWidth="sm">
          <ul>The value is {sma}</ul>
        </Container><div>
       

        </div>

        <VictoryChart
          theme={VictoryTheme.material}
          domainPadding={10}
        >
          <VictoryBar
            style={{ data: { fill: "#c43a31" } }}
            data={closingdata}
          />
        </VictoryChart>
        <div>
          <VictoryChart
            theme={VictoryTheme.material}
          >
            <VictoryLine
              style={{
                data: { stroke: "#c43a31" },
                parent: { border: "1px solid #ccc" }
              }}
              animate={{
                duration: 20,
                onLoad: { duration: 20 }
              }}
              containerComponent={<VictoryZoomContainer zoomDomain={{x: [5, 35], y: [0, 100]}}/>}
              categories={{
                y: dates
              }}
            
              
              
              data={closingdata}
            />
          </VictoryChart>
        </div>
 
      </Container>
    </>
  );


}```
4

2 回答 2

0

这似乎是按钮设置。我改成这个，它工作....??ggrrrr

          Click it
            </button>
        <Container className="container" maxWidth="sm">
          <li>{metadata}</li>
        </Container>

        <button onClick={computeSMA}>
          Click it
            </button>
        <Container className="container" maxWidth="sm">
          <li>{sma}</li>
        </Container>
于 2021-02-20T02:08:03.863 回答
0

在您的第一个代码中，您使用 OnClick 作为事件名称。应该是onClick。它是一种反应语法，并且区分大小写。

于 2021-05-14T17:18:24.600 回答