componentDidUpdate（prevProps、prevState、snapshot）：prevProps未定义

Question

我是相当新的反应，我试图建立这个简单的网络应用程序，将股票标签作为输入，并根据给定股票的表现更新图表。然而，我无法更新我的图表。我尝试使用组件didUpdate（预防道具，预防状态，快照），但出于某种原因，预防道具是未定义的，我不知道/理解为什么。我试着在网上搜索并阅读文档，但我仍然不明白。任何帮助都将不胜感激。

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

我有这个问题，这是因为有一个子类调用super.componentdidUpdate（）而不传入参数。所以这个子类看起来像：

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

我不得不把它改成：

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

Answer 2

我不太确定你在这里想要完成什么，但我注意到的第一件事是你设置了stocktag的状态。状态onSubmitSearch函数中为“”的searchfield。

    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

道具。stocktag未定义，因为您未向应用程序组件传递任何道具。在你的索引中试试这个。您将看到prepops值，但实际上它没有任何意义。

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