将数组放入 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 >
          </>
        )

    }