Question

我对React还是很陌生，我正在尝试构建一个简单的Web应用程序，该应用程序将股票标签作为输入并根据给定股票的性能来更新图表。但是，我无法更新图表。我尝试使用componentDidUpdate（prevProps，prevState，快照），但是由于某些原因，prevProps是未定义的，我不知道/不明白为什么。我尝试在线搜索并阅读doc文件，但仍然无法弄清楚。任何帮助将不胜感激。

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

我不确定您要在这里完成什么，但是我注意到的第一件事是将settag的setState设置为on.mit.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
  }

componentDidUpdate（prevProps，prevState，快照）：prevProps未定义

3 个答案: