javascript - Reactjs 多次获取 - TypeError : Cannot read property 'last' of undefined

Question

我已经有一次提取并希望获得多次提取，但第二次提取无法读取数据。它显示“类型错误:无法读取未定义的属性‘最后’”。

这是我的一次获取代码:

class App extends Component {
constructor(props) {
    super(props);
    this.state = {
        error: null,
        isLoaded: false,
        ticker: []
    };
}

componentDidMount() {
    fetch("https://vip.bitcoin.co.id/api/btc_idr/ticker")
    .then(res => res.json())
    .then(
        (result) => {
            this.setState({
                isLoaded: true,
                tickerBtcIdr: result.ticker
            });
        },
        (error) => {
            this.setState({
                isLoaded: true,
                error
            });
        }
    )
}

render() {
    const {
        error,
        isLoaded,
        tickerBtcIdr,
    }  = this.state;
    if (error) {
        return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
        return (
            <div>
                <div className="App"></div>
                <div className="Loading">
                    <Loading />
                </div>
            </div>
        );
    } else {
        return (
            <div className="App">
                <AppBar />
                <table>
                    <tr>
                        <td><b>IDR MARKETS</b></td>
                    </tr>
                    <tr>
                        <td>BTC/IDR</td>
                        <td>Bitcoin</td>
                        <td>{tickerBtcIdr.last}</td>
                        <td>{tickerBtcIdr.vol_idr}</td>
                    </tr>
                </table>
            </div>
        );
    }
}}

这个工作，但是如果我重复获取:

    componentDidMount() {
    fetch("https://vip.bitcoin.co.id/api/btc_idr/ticker")
    .then(res => res.json())
    .then(
        (result) => {
            this.setState({
                isLoaded: true,
                tickerBtcIdr: result.ticker
            });
        },
        (error) => {
            this.setState({
                isLoaded: true,
                error
            });
        }
    )

    fetch("https://vip.bitcoin.co.id/api/bch_idr/ticker")
    .then(res => res.json())
    .then(
        (result) => {
            this.setState({
                isLoaded: true,
                tickerBchIdr: result.ticker
            });
        },
        (error) => {
            this.setState({
                isLoaded: true,
                error
            });
        }
    )
}

我渲染它:

    render() {
    const {
        error,
        isLoaded,
        tickerBtcIdr,
        tickerBchIdr,
    }  = this.state;
    if (error) {
        return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
        return (
            <div>
                <div className="App"></div>
                <div className="Loading">
                    <Loading />
                </div>
            </div>
        );
    } else {
        return (
            <div className="App">
                <AppBar />
                <table>
                    <tr>
                        <td>BTC/IDR</td>
                        <td>{tickerBtcIdr.last}</td>
                        <td>{tickerBtcIdr.vol_idr}</td>
                    </tr>
                    <tr>
                        <td>BCH/IDR</td>
                        <td>{tickerBchIdr.last}</td>
                    </tr>
                </table>
            </div>
        );
    }
}

}

它显示“TypeError:无法读取未定义的属性'last'”。

Answer 1

Fetch 的 Promise 是异步的，因此第二个请求有可能在第一个请求之前完成。

如果第二个请求首先返回，则您的状态如下:

{
  isLoaded: true,
  tickerBtcIdr: undefinded,
  tickerBchIdr: { ... },
  ...
}

但是当 isLoaded 为真时，您的渲染函数期望 tickerBtcIdr 和 tickerBchIdr 都包含数据。

由于您希望渲染中同时包含这两个数据集，因此您无法在收到一个请求后将 isLoaded 设置为 true。最简单的解决方案是仅检查数据，而不是使用不可信的 isLoading 值。

在渲染函数中，您可以更改此设置:

else if (!isLoaded) 

至

else if (!(tickerBtcIdr && tickerBchIdr))

如果您确实想使用isLoading，您可以使用Promise.all()或async await ，这使得可以在将 isLoading 设置为 true 之前等待两个获取请求。