componentDidUpdate(prevProps, prevState, snapshot): prevProps 未定义

Posted 2023-02-22

【中文标题】componentDidUpdate(prevProps, prevState, snapshot): prevProps 未定义

【英文标题】：componentDidUpdate(prevProps, prevState, snapshot): prevProps is undefined

【发布时间】：2020-11-10 06:29:00

【问题描述】：

我是 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;

【参考方案1】：

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');
       
   

【参考方案2】：

我不太确定您在这里要完成什么，但我注意到的第一件事是您将 stocktag 的状态设置为 this.state.searchfield，它在您的 onSubmitSearch 函数中是 ' '。

    onSearchChange = (event) => 
        var search = event.target.value;
        this.setState( stocktag: search );
    

    onSubmitSearch = (e) => 
        var search = this.state.searchfield;
        this.setState( stocktag: search );
    

添加我还想补充一点，将输入值设置为这样的状态值是一种很好的做法

import React,  Component, useState  from 'react';
import './Search.css'

const Search = ( searchChange, submitChange ) => 
const [inputValue, setInputValue] = useState('')

  const handleChange = (e) => 
    setInputValue(e.target.value)
    searchChange(e)
  
    return (
        <div>
            <div class="SearchCompInput">
                <input class="SearchBar" type="text" value = inputValue onChange=handleChange/>
            </div>
            <div class="SearchCompButton">
                <button class="SearchButton" onClick=submitChange>Search</button>
            </div>
        </div>
    );


export default Search;

【参考方案3】：

我遇到了这个问题，这是因为有一个子类在调用super.componentDidUpdate() 时没有传入参数。所以子类看起来像：

  componentDidUpdate() 
      super.componentDidUpdate();
      ... <-- other stuff
  

我不得不把它改成：

  componentDidUpdate(prevProps, prevState) 
      super.componentDidUpdate(prevProps, prevState);
      ... <-- other stuff