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 function 中是“”。

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

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

添加我還想補充一點，將輸入值設置為 state 值是一種很好的做法，如下所示

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

我遇到了這個問題，這是因為有一個孩子 class 正在調用super.componentDidUpdate()而沒有傳入參數。 所以孩子 class 看起來像：

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

我不得不將其更改為：

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