Javascript 从父组件传递道具在子组件中变为null

我正在制作一个简单的React站点，它从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} />);
  }
}

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

对

…但我不知道如何使其仅在完成后渲染

您有两个选择：

（我认为您不需要这个。）将ajax调用移动到父组件的父组件中，并且仅在您有数据时渲染父组件

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

#2看起来像这样：

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

render（）{
const{data}=this.state；
返回（数据？：加载…）；
}

---

…但可能有比加载更吸引人的东西…：-）

最简单的方法是使用一些条件渲染，而

AuctionViewer

则是“获取”数据。初始状态为

null

，并传递给

Auction

，但您可以在等待时有条件地呈现其他UI或null

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

render（）{
const{data}=this.state；
返回数据(
)：装载。。。；
}

或者返回null以指示不应呈现任何内容

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

render（）{
const{data}=this.state；
返回数据(
)：null；
}

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