javascript - componentDidUpdate(prevProps, prevState, snapshot): prevProps 未定义
问题描述
我对 React 很陌生,我正在尝试构建这个简单的 Web 应用程序,它以股票标签作为输入,并根据给定股票的表现更新图表。但是,我无法更新我的图表。我尝试使用 componentDidUpdate(prevProps, prevState, snapshot),但由于某种原因 prevProps 未定义,我不知道/不明白为什么。我尝试在线搜索并阅读文档文件,但我仍然无法弄清楚。任何帮助,将不胜感激。
import Search from './Search.js'
import Graph from './Graph.js'
import Sidebar from './Sidebar.js'
import './App.css'
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = {
data: [{
x: [],
close: [],
decreasing: { line: { color: '#FF0000' } },
high: [],
increasing: { line: { color: '#7CFC00' } },
line: { color: 'rgba(31,119,180,1)' },
low: [],
open: [],
type: 'candlestick',
xaxis: 'x',
yaxis: 'y'
}]
,
layout: {
width: 1500,
height: 700,
font: { color: '#fff' },
title: { text: 'Stock', xanchor: "left", x: 0 }, paper_bgcolor: '#243b55', plot_bgcolor: '#243b55', yaxis: { showgrid: true, color: '#fff' },
xaxis: {
zeroline: true, color: '#fff', showgrid: true, rangeslider: {
visible: false
}
}
},
searchfield: '',
stocktag: ' '
};
this.onSearchChange = this.onSearchChange.bind(this);
this.onSubmitSearch = this.onSubmitSearch.bind(this);
}
componentDidMount() {
document.body.style.backgroundColor = '#243b55';
this.loadGraphInfo();
}
componentDidUpdate(prevProps, prevState, snapshot){
console.log(prevProps.stocktag);
console.log(prevState.stocktag);
if (prevProps.stocktag !== prevState.stocktag) {
//this.fetchData('SPY');
}
}
onSearchChange = (event) => {
var search = event.target.value;
this.setState({ stocktag: search });
}
onSubmitSearch = (e) => {
var search = this.state.searchfield;
this.setState({ stocktag: search });
}
fetchData(stock) {
//GET DATA
//UPDATE STATE
}
loadGraphInfo() {
if (this.state.stocktag == ' ') {
this.fetchData('SPY');
} else {
this.fetchData(this.state.stocktag);
}
}
render() {
return (
<div className="App" >
<Sidebar />
<Search searchChange={this.onSearchChange} submitChange={this.onSubmitSearch} />
<Graph data={this.state.data} layout={this.state.layout} />
</div>
);
}
}
export default App;
import React, { Component } from 'react';
import './Search.css'
const Search = ({ searchChange, submitChange }) => {
return (
<div>
<div class="SearchCompInput">
<input class="SearchBar" type="text" onChange={searchChange}/>
</div>
<div class="SearchCompButton">
<button class="SearchButton" onClick={submitChange}>Search</button>
</div>
</div>
);
}
export default Search;
解决方案
prevProps.stocktag 未定义,因为您没有将任何道具传递给 App 组件。在你的 index.js 中尝试这个,你会看到 preProps 值,但实际上它没有任何意义。
render(<App stocktag='' />, document.getElementById('root'));
componentDidUpdate(prevProps, prevState, snapshot){
console.log(prevProps.stocktag);
console.log(prevState.stocktag);
if (prevProps.stocktag !== prevState.stocktag) {
//this.fetchData('SPY');
}
}
推荐阅读
- sql - SQL/Presto:如何在 ds 上获取项目开始时间的累积总和
- flutter - 在 Flutter 中初始化堆上的 State 属性与 initState 函数
- python - 尝试在 Selenium 中设置窗口,而不是我将它们选项卡到 1 个浏览器窗口中
- node.js - Mocha:无法在另一个测试文件中已经需要的文件中存根函数
- python - 在父项目上运行 pytest 时,如何忽略 git 子模块(例如 submodule/conftest.py)根目录下的 conftest.py 文件?
- assembly - 在汇编程序中消除对 -no-pie 的需要
- delphi - Memoryleak with TBgraBitmap an ZXING in Lazarus
- javascript - 如何使用 html 代码从本地文件中选择图像
- c++ - 为什么在具有静态范围的 std::span 中不允许默认构造?
- python - Python websockets 以一种方式快速,但响应速度慢 10 倍