Reactjs 我们是否可以将从API获得的JSON作为子组件而不是对象的每个单独属性发送？

我一直试图通过state将通过API调用获得的数据发送给子组件，但它似乎不起作用

我已经将对象的每个单独属性作为道具发送到子组件

有没有办法将整个JSON响应作为道具发送给子组件

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {},
      name: ""
    };
  }
  componentWillMount() {
    this.getWeather();
  }
  getWeather(city) {
    fetch(
      `https://api.apixu.com/v1/current.json?key=2da827a3ce074ddb85417374xxxxxx&q=paris`
    )
      .then(res => res.json())
      .then(data => {
        this.getData(data);
      })
      .catch(err => {
        return Promise.reject();
      });
  }
  getData(data) {
    var location = data.location.name;

    this.setState({ data: data, name: location });
    console.log(this.state.name);
    console.log(this.state.data);
  }
  render() {
    return <Child name={this.state.name} data={this.state.data} />;
  }
}

class Child extends React.Component {
  render() {
    var data = this.props.data;
    return (
      <div>
        <h1>{this.props.name}</h1>
        <h1> {data.current.cloud}</h1>
      </div>
    );
  }
}

ReactDOM.render(<Parent />, document.getElementById("root"));

类父级扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：{}，
姓名：“
};
}
组件willmount（）{
这个。getWeather（）；
}
getWeather（城市）{
取回(
`https://api.apixu.com/v1/current.json?key=2da827a3ce074ddb85417374xxxxxx&q=paris`
)
.then（res=>res.json（））
。然后（数据=>{
这个.getData（数据）；
})
.catch（错误=>{
返回承诺。拒绝（）；
});
}
getData（数据）{
变量位置=data.location.name；
this.setState（{data:data，name:location}）；
console.log（this.state.name）；
console.log（this.state.data）；
}
render（）{
返回；
}
}
子类扩展了React.Component{
render（）{
var数据=this.props.data；
返回(
{this.props.name}
{data.current.cloud}
);
}
}
render（，document.getElementById（“根”））；

我希望数据对象也被传递给子对象，但它没有，我得到一个崩溃屏幕，说明数据对象未定义

---

有没有办法将在API调用中获得的整个JSON作为道具发送给子组件？

您的

子组件将在
getWeather
API返回数据之前呈现。因此
子组件中的
这个.props.data
将是
{}
，当您访问
data.current.cloud
时，应用程序将崩溃

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {},
      name: ""
    };
  }
  componentWillMount() {
    this.getWeather();
  }
  getWeather(city) {
    fetch(
      `https://api.apixu.com/v1/current.json?key=2da827a3ce074ddb85417374xxxxxx&q=paris`
    )
      .then(res => res.json())
      .then(data => {
        this.getData(data);
      })
      .catch(err => {
        return Promise.reject();
      });
  }
  getData(data) {
    var location = data.location.name;

    this.setState({ data: data, name: location });
    console.log(this.state.name);
    console.log(this.state.data);
  }
  render() {
    return <Child name={this.state.name} data={this.state.data} />;
  }
}

class Child extends React.Component {
  render() {
    var data = this.props.data;
    return (
      <div>
        <h1>{this.props.name}</h1>
        <h1> {data.current.cloud}</h1>
      </div>
    );
  }
}

ReactDOM.render(<Parent />, document.getElementById("root"));

您需要检查
数据
是否为空，并且它是否具有
当前
属性。所以你的代码应该是

class Child extends React.Component {
  render() {
    var data = this.props.data;
    return (
      <div>
        <h1>{this.props.name}</h1>
        <h1>{data && data.current ? data.current.cloud : ''}</h1>
      </div>
    );
  }
}

类子级扩展React.Component{
render（）{
var数据=this.props.data；
返回(
{this.props.name}
{data&&data.current？data.current.cloud:'}
);
}
}
在方法“ComponentDidMount”中执行所有API调用，而不是在方法“ComponentWillMount”中执行所有API调用始终是最佳做法。这样就不用检查响应是否来自API。一旦响应出现，组件将被重新呈现。所以，你可以像下面这样做

componentDidMount() {
        this.getWeather();
      }

作为@tien Duoung评论的补充

您可能需要添加一个额外的状态变量。您可以称之为
获取
或
加载
。其目的至少是在api结果尚未准备好时显示一些内容。可能是这样的：

此.state={
数据：{}，
姓名：“，
抓取：对
}

在
getData
方法的
.then
中，一旦data.current可用，
this.setState（{fetching:false}）

getData（数据）{
变量位置=data.location.name

this.setState({ data: data, name: location, fetching: false });
console.log(this.state.name);
console.log(this.state.data);

}

然后将抓取作为道具传递给子组件，当抓取为真时，呈现一个加载器组件或说一个占位符
Loading…