Javascript 对链接作出反应单击将数据加载到右侧面板

我在尝试可视化，甚至思考如何将其抽象为组件时遇到了一个问题

我试图做的是在我的主页上调用API来加载数据（不在数组中的对象）并在左侧面板上显示它们。这部分工作正常，数据加载正确

我遇到的问题是试图将与我单击的链接相关的所有数据加载到右侧面板中

我现在只在左侧面板上显示名称，而不显示其余数据。我需要以某种方式显示与我单击的链接关联的对象中的所有数据

我的家

import React from 'react';
import ContactContainer from '../components/contacts';
import ContactDetails from '../views/contact-details';


class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }

  render() {
    if (!this.state.data) {
      return null;
    }

    return (
      <div>
        <ContactContainer />
        <ContactDetails />
      </div>
    );
  }
}

export default Home;

从“React”导入React；
从“../components/contacts”导入ContactContainer；
从“../views/contact-details”导入ContactDetails；
类Home扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]
};
}
render（）{
如果（！this.state.data）{
返回null；
}
返回(
);
}
}
导出默认主页；

应显示单击链接的对象数据的右侧面板

import React from 'react';


class ContactDetails extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }

  render() {
    if (!this.state.data) {
      return null;
    }

    console.log(this.props)

    return (
      <div>Weeeee</div>
    );
  }
}

export default ContactDetails;

从“React”导入React；
类ContactDetails扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]
};
}
render（）{
如果（！this.state.data）{
返回null；
}
console.log（this.props）
返回(
威伊
);
}
}
导出默认联系人详细信息；

加载数据的主要组件

import React from 'react';
import { Link } from 'react-router';
import SearchFilter from '../components/search';


class Contact extends React.Component {
  handleClick() {
    console.log(this.props.items)
  }

  render() {
    var content;
    var self = this;
    if (this.props.items.length > 0) {
      var items = this.props.items.map(function(item) {
        return (
          <div className="list-item" key={item.person_id}>
            <h5 className="event-title">
              <a href="#" onClick={self.handleClick.bind(self, item.person_id)}>{item.name}</a>
            </h5>
          </div>
        )
      });

      content = {items}
    } else {
      content = <p>No items matching this filter</p>;
    }
    return (
      <div>
        {content}
      </div>
    );
  }
}


class ContactContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      nameFilter: ''
    };
  }

  componentWillMount() {
    this.loadEvents('./javascript/api/people.json');
  }

  loadEvents(url) {
    $.ajax({
      url: url,
      dataType: 'json',
      success: function(data) {
        this.setState({
          data: data
        });
      }.bind(this),
      error: function(xhr, status, err, data) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  }

  inputFilterUpdate(filterValue) {
    this.setState({
      nameFilter: filterValue
    });
  }

  _hasData() {
    var displayedItems = this.state.data.filter(function(person) {
      var contactName = person.name.toLowerCase(),
          contactNameFilter = this.state.nameFilter.toLowerCase();

      return contactName.indexOf(contactNameFilter) > -1;
    }.bind(this));

    return (
      <div className="contact-list">
        <div className="contact-list__search">
          <SearchFilter updateFilter={this.inputFilterUpdate.bind(this)} />
        </div>
        <div className="contact-list__view">
          <Contact items={displayedItems} />
        </div>
      </div>
    );
  }

  render() {
    if (this.state.data) {
      return (
        <div>
          {this._hasData()}
        </div>
      )          
    } else {
      return <div>Loading...</div>;
    }

    return false
  }
}

export default ContactContainer;

从“React”导入React；
从“反应路由器”导入{Link}；
从“../components/search”导入SearchFilter；
类Contact扩展了React.Component{
handleClick（）{
console.log（this.props.items）
}
render（）{
var含量；
var self=这个；
如果（this.props.items.length>0）{
var items=this.props.items.map（函数（项）{
返回(
)
});
内容={items}
}否则{
内容=没有与此筛选器匹配的项目
；
}
返回(
{content}
);
}
}
类ContactContainer扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
名称筛选器：“”
};
}
组件willmount（）{
this.loadEvents（'./javascript/api/people.json'）；
}
加载事件（url）{
$.ajax({
url:url，
数据类型：“json”，
成功：功能（数据）{
这是我的国家({
数据：数据
});
}.绑定（此），
错误：函数（xhr、状态、错误、数据）{
console.error（this.props.url，status，err.toString（））；
}.绑定（此）
});
}
inputFilterUpdate（filterValue）{
这是我的国家({
nameFilter:filterValue
});
}
_hasData（）{
var displayedItems=this.state.data.filter（函数（人）{
var contactName=person.name.toLowerCase（），
contactNameFilter=this.state.nameFilter.toLowerCase（）；
返回contactName.indexOf（contactNameFilter）>-1；
}.约束（这个）；
返回(
);
}
render（）{
if（this.state.data）{
返回(
{this.\u hasData（）}
)          
}否则{
返回装载。。。；
}
返回错误
}
}
导出默认ContactContainer；

---

任何帮助都将不胜感激。

我不知道您的代码如何呈现两个部分。看起来就像是项目列表。它不应该呈现右面板，直到用户单击左面板上的链接，然后它应该呈现包含对象中数据的右面板。这就是我遇到麻烦的部分，我试图找出如何使用与

Contact

中的链接匹配的id附加对象，以在新部分中渲染。我已经编辑了源代码以显示我当前所在的位置。当前的问题是链接返回所有对象，而不是与链接ID关联的对象。这是一个主详细视图。React路由器有一个：-）好的，谢谢！我会看一看，看看我能找到什么。我确实有正确的面板视图，并更新了原始代码以显示它，以防有帮助。我不知道您的代码如何呈现两个部分。看起来就像是项目列表。它不应该呈现右面板，直到用户单击左面板上的链接，然后它应该呈现包含对象中数据的右面板。这就是我遇到麻烦的部分，我试图找出如何使用与

Contact

中的链接匹配的id附加对象，以在新部分中渲染。我已经编辑了源代码以显示我当前所在的位置。当前的问题是链接返回所有对象，而不是与链接ID关联的对象。这是一个主详细视图。React路由器有一个：-）好的，谢谢！我会看一看，看看我能找到什么。我确实有正确的面板视图和更新的原始代码，以显示它的情况下，它是有用的。