Javascript 如何将道具作为对象传递

我使用fetch（）函数从api获取用户数据。在render函数中，我想使用…userdata传递props，但当我在return语句之前创建object时，它会给我错误。错误是： TypeError:无法读取未定义的属性“id”

错误是因为加载应用程序时没有用户数据，只能在单击搜索按钮时获取

请让我知道如何创建对象并将其作为道具传递，而不是将对象的每个成员单独作为道具传递。i、 e

import React from 'react';
import './App.css';
import SearchBar from "./components/search";
import Result from "./components/result";

class ContactSearch extends React.Component {
  constructor() {
    super();
    this.state = {
      // userData: {
        // id: 0,
        // name: "",
        // username: ""
      // },
      userData : [],
      userAddr : {},
      searchDone: false,
      errorMessage: ""
    };

    this.callUserData = this.callUserData.bind(this);
  }

  callUserData(user) {
    const url = `<URL>`;

    fetch(url)
      .then(handleErrors)
      .then(resp => resp.json())
      .then(data => {
        var { ...addr} = data[0].address;
        this.setState({
          userData: [...data],
          userAddr: addr,
          searchDone: true,
          errorMessage: ""
        });
      })
      .catch(error => {
        // If an error is catch, it's sent to SearchBar as props
        this.setState({ errorMessage: error.message });
      });

    function handleErrors(response) {
      if (!response.ok) {
        throw Error(response.statusText);
      }
      return response;
    }
  }

  render() {
    const { searchDone, userData, userAddr, errorMessage } = this.state;
    console.log('Inside render');

        let **user** = {
                id : userData[0].id,
                name:userData[0].name,
                email:userData[0].email,
                address:userAddr
            };

        return (
          <div className="ContactSearch">
            <SearchBar
              callBackFromParent={this.callUserData}
              error={errorMessage}
            />

            {searchDone && userData && (
              <Result

                    {...**user**}
              />
            )}
          </div>
        );
  }
}

export default ContactSearch;

从“React”导入React；
导入“/App.css”；
从“/components/search”导入搜索栏；
从“/components/Result”导入结果；
类ContactSearch扩展了React.Component{
构造函数（）{
超级（）；
此.state={
//用户数据：{
//id:0，
//姓名：“，
//用户名：“
// },
用户数据：[]，
userAddr:{}，
搜索完成：错误，
错误信息：“
};
this.callUserData=this.callUserData.bind（this）；
}
数据（用户）{
常量url=``；
获取（url）
.然后（handleErrors）
.then（resp=>resp.json（））
。然后（数据=>{
var{…addr}=数据[0]。地址；
这是我的国家({
userData:[…数据]，
userAddr:addr，
是的，
错误信息：“
});
})
.catch（错误=>{
//如果捕获到错误，它将作为道具发送到搜索栏
this.setState（{errorMessage:error.message}）；
});
函数句柄错误（响应）{
如果（！response.ok）{
抛出错误（response.statusText）；
}
返回响应；
}
}
render（）{
const{searchDone，userData，userAddr，errorMessage}=this.state；
console.log（“内部渲染”）；
让**用户**={
id:userData[0]。id，
名称：userData[0]。名称，
电子邮件：userData[0]。电子邮件，
地址：userAddr
};
返回(
{searchDone&&userData&&(
)}
);
}
}
导出默认联系人搜索；

您可以使用if语句检查所需数据是否已加载到状态，以避免在第一次渲染时尝试访问它：

const { searchDone, userData, userAddr, errorMessage } = this.state;
let user = null;
if (userData.length > 0) {
    user = {
        id : userData[0].id,
        name:userData[0].name,
        email:userData[0].email,
        address:userAddr
    };
}

做同样事情的较短方法：

const { searchDone, userData, userAddr, errorMessage } = this.state;
let user = searchDone && {
    id : userData[0].id,
    name:userData[0].name,
    email:userData[0].email,
    address:userAddr
};

---

可以使用if语句检查所需数据是否已加载到状态，以避免在第一次渲染时尝试访问它：

const { searchDone, userData, userAddr, errorMessage } = this.state;
let user = null;
if (userData.length > 0) {
    user = {
        id : userData[0].id,
        name:userData[0].name,
        email:userData[0].email,
        address:userAddr
    };
}

做同样事情的较短方法：

const { searchDone, userData, userAddr, errorMessage } = this.state;
let user = searchDone && {
    id : userData[0].id,
    name:userData[0].name,
    email:userData[0].email,
    address:userAddr
};

也许你需要这个

<Result user={searchDone && userData[0]} />

也许你需要这个

<Result user={searchDone && userData[0]} />

---

这是否回答了您的问题？问题是

userData[0]

在

fetch

进行时

未定义

。你需要在渲染逻辑中说明这一点。你需要类似这样的东西吗？@Alex，你是对的。这回答了你的问题吗？这回答了你的问题吗？问题是

userData[0]

在

fetch

进行时

未定义

。你需要在渲染逻辑中说明这一点。你需要类似这样的东西吗？@Alex，你是对的。这回答了你的问题吗？您的第一个解决方案再次出现相同的错误。TypeError:无法读取未定义的userData的属性“id”不是null，只是一个空数组。第二个很好用。谢谢。你说得对，我错过了你将

userData

初始化为空数组的消息，对不起！我编辑了我的回答我也做了同样的：-）即如果（userData.length>0）。。。。。谢谢。很高兴听到这个消息，不客气，@Mahesh！如果这个或任何答案已经解决了你的问题，请考虑投票，并通过点击复选标记接受它。这向更广泛的社区表明，你已经找到了一个解决方案，并给回答者和你自己带来了一些声誉。没有义务这样做。干杯您的第一个解决方案再次出现相同的错误。TypeError:无法读取未定义的userData的属性“id”不是null，只是一个空数组。第二个很好用。谢谢。你说得对，我错过了你将

userData

初始化为空数组的消息，对不起！我编辑了我的回答我也做了同样的：-）即如果（userData.length>0）。。。。。谢谢。很高兴听到这个消息，不客气，@Mahesh！如果这个或任何答案已经解决了你的问题，请考虑投票，并通过点击复选标记接受它。这向更广泛的社区表明，你已经找到了一个解决方案，并给回答者和你自己带来了一些声誉。没有义务这样做。干杯