如何將道具作為對象傳遞

Question

我正在使用 fetch() 函數從 api 獲取用戶數據。 在渲染函數中，我想使用 ...userdata 傳遞道具，但是當我在 return 語句之前創建對象時，它給了我錯誤。 錯誤是： TypeError：無法讀取未定義的屬性“id”

錯誤是因為在加載應用程序時沒有 userData，它僅在單擊搜索按鈕時獲取。

請讓我知道如何創建對象並將其作為道具傳遞，而不是將對象的每個成員分別作為道具傳遞。 IE

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;

Answer 1

您可以使用 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
};

Answer 2

也許你需要這個

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

結果組件可能是這樣的

const Result=(props)=>
 ( props.user?<div>{props.user.id}</div>:'no result..^.^')

如果您的數據類似於 [{id:1},{id:2}] 從數據userData: [data]刪除額外的括號

應該像下面

      userData: data,

臨時沙箱示例