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

Question

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

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

Answer 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;

Answer 3

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

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

我不得不把它改成：

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