时间戳

首页 > 解决方案 > 如何将道具作为对象传递

javascript - 如何将道具作为对象传递

问题描述

我正在使用 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;

标签： javascriptreactjs

解决方案

也许你需要这个

<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,

临时沙箱示例

推荐阅读