將數組放入 this.state 時如何訪問數組？

Question

我是新來的反應，並已閱讀有關如何進行 Ajax 調用的反應文檔。 當他們返回 json 信息時，他們讓它看起來很簡單，但這對我不起作用。 我正在嘗試調用 json 信息並將其設置為 this.state.stockSymbol 但每次我嘗試訪問我使用 typeof 的信息時，它都會返回 object。 當我控制台記錄它時，我可以清楚地看到 json 信息，但由於某種原因，它不會在我的 getSymbol function 中更新。 我認為這與異步調用有關，但我並不完全理解它。 有人可以指出我正確的方向嗎？

這是我的代碼：

class Stocks extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            userInput: '',
            stockSymbol: [],
            isLoaded: false
        }
    }

    typeSymbol = (e) => {
        this.setState({
            userInput: e.target.value.toUpperCase()
        }, (e) => {
            console.log(this.state.userInput)
        })
    }

    getSymbol = (e) => {
        e.preventDefault(),
            this.setState({
                stockSymbol: this.state.stockSymbol
            }, () => {
                console.log(typeof this.state.stockSymbol)
                console.log(this.state.stockSymbol)
            })
    }

    componentDidMount() {
        fetch(`https://finnhub.io/api/v1/stock/symbol?exchange=US&token=${key}`)
            .then(res => res.json())
            .then(
                (results) => {
                    this.setState({
                        isLoaded: true,
                        stockSymbol: results
                    });
                    console.log(results)
                },
                (error) => {
                    this.setState({
                        isLoaded: true,
                        error
                    });
                }
            )
    }


    render() {
        const { stockSymbol, userInput, results } = this.state


        stockSymbol.map((stock, i) => {

            if (userInput === this.state.stockSymbol) {
                return (
                    console.log('same'),
                    <span className="symbol" key={i} onSubmit={this.getSymbol}>
                        {stock.displaySymbol}
                    </span>
                );
            }
        })



        return (
            <div className="enterstock">
                <h1 className="title">Enter Stock Symbol</h1>
                <span className="symbol">{this.state.userInput}</span>
                <form className="inputfields" onSubmit={this.getSymbol}>
                    <input type="text" className="symfields" name="symbolname" onChange={this.typeSymbol}></input>
                    <button type="submit" className="btn">Send</button>
                </form>
            </div >
        )

    }
}




ReactDOM.render(
    <Stocks />,
    document.getElementById('root')
)

Answer 1

有幾個問題，但不是獲取數據。

1. 您要做的是過濾股票代碼，但您將 userInput 與股票符號進行比較，而不是與每只股票的名稱進行比較
2. getSymbol 不需要 setState，因為您在獲取數據后已經設置了 state。

這是一個沙盒，您可以試用它，它完全符合您的要求： https://codesandbox.io/s/twilight-dream-jwe7g?file=/src/index.js搜索“leanne graham”進行測試

Answer 2

很可能問題出在您的渲染 function 上，映射實際上並未被渲染。 您必須返回一個包含所有內容的 jsx 表達式。

    render() {
        const { stockSymbol, userInput, results } = this.state


        const symbols = stockSymbol.map((stock, i) => {
            // removed your if statement, it didn't make sense
            return (
              <span className="symbol" key={i} onSubmit={this.getSymbol}>
                 {stock.displaySymbol}
              </span>
            );
        })

        return (
          <>
            {symbols}
            <div className="enterstock">
                <h1 className="title">Enter Stock Symbol</h1>
                <span className="symbol">{this.state.userInput}</span>
                <form className="inputfields" onSubmit={this.getSymbol}>
                    <input type="text" className="symfields" name="symbolname" onChange={this.typeSymbol}></input>
                    <button type="submit" className="btn">Send</button>
                </form>
            </div >
          </>
        )

    }