从父组件传递道具在子组件 React 中变为空

Question

我正在制作一个简单的 React 站点，它从 API（此 API ）获取一些数据，然后将其显示在页面上。 我使用的端点是skyblock/auctions端点。 这返回的是一个对象列表，我想获取其中的第一个，然后将其传递给子组件。 父级可以成功获取数据，但是当我将其传递给子级并将其console.log时，它返回null 。 我能想到为什么这样做的唯一原因是父组件尚未完成获取数据，但我不确定如何使其仅在完成后呈现。

这是父组件AuctionViewer的代码：

class AuctionViewer extends Component {
  state = { data: null}

  loadData = async () => {
    let url = "https://api.hypixel.net/skyblock/auctions?key=INSERT_KET_HERE" 
    let response = await fetch(url);
    let json = await response.json();

    this.setState({data: json.auctions[0]}, function () {
      console.log(this.state.data)
    });
  }

  componentDidMount() {
    this.loadData();
    setInterval(this.loadData, 60 * 1000);
  }

  render() { 
    return (<Auction data={this.state.data} />);
  }
}

这是子组件Auction ：

class Auction extends Component {
  state = {
    loading: true,

    item: null,
    price: null,
    startPrice: null,
    time: null,
  };

  loadData() {
    let data = this.props.data;
    console.log(data);

    let end = new Date(data.end - Date.now());
    let timeLeft = end.getHours() + ":" + end.getMinutes() + ":" + end.getSeconds();     
    this.setState({loading: false, item: data.item_name, price: data.highest_bid_amount, startPrice: data.starting_bid, time: timeLeft, timestamp: end});
  };

  componentDidMount() {
    this.loadData();
  }

  render() {
    return (
      <div className="gridBox">
        {this.state.loading ? (
          <p>Loading...</p>
        ) : (
          <div>
            <p>Item: {this.state.item}</p>
            <p>Top Bid: {this.state.price}</p>
            <p>Start Bid: {this.state.startPrice}</p>
            <p>Time Left: {this.state.time}</p>
          </div>
        )}
        <button onClick={this.loadData}>Refresh</button>
      </div>
    );
  }
}

Answer 1

我能想到的唯一原因是因为父组件还没有完成获取数据......

这是正确的。

...但我不知道如何让它在完成后才呈现。

您有两个选择：

1. （我不认为你想要这个。）将ajax调用移动到父组件的父组件中，只有在有数据时才渲染父组件。

2. 让父组件呈现某种“加载”状态，直到数据可用

#2 看起来像这样：

render() { 
  const { data } = this.state;
  return (data ? <Auction data={data} /> : <em>Loading...</em>);
}

...但可能有一些比<em>Loading...</em>更有吸引力的东西。 :-)

Answer 2

最简单的是在AuctionViewer正在“获取”数据时使用一些条件渲染。 初始状态为null并将其传递给Auction ，但您可以在等待时有条件地呈现其他 UI 或 null。

render() { 
  const { data } = this.state;
  return data ? (
    <Auction data={data} />
  ) : <div>Loading...</div>;
}

或者返回 null 以表示不应该渲染任何内容。

render() { 
  const { data } = this.state;
  return data ? (
    <Auction data={data} />
  ) : null;
}