Question

如何根据记录ID将数据从主组件传递到子组件。我有一个index.js和detail.js页面。在索引页面中，我有一个链接为<Link to={{ pathname: / cards / $ {results.id} , state: results }} className={ card-wrapper restore-$ {results.id} {{1} }，当我单击链接时，我想将与该链接的记录/ Id值关联的数据发送到详细信息页面并显示。

当前我仅使用}> {results.first_name} </Link>

显示第一条记录的数据

这是我在sandbox中的代码

index.js

{cardData.data.Table[0].first_name},{cardData.data.Table[0].last_name},{cardData.data.Table[0].email}

和Detail.js如下

import Detail from "./Detail";
export class Cards extends React.Component {
  state = { data: [] };
  componentDidMount() {
    this.setState({ data: cardData.data.Table });
  }

  render() {
    const cardKeys = Object.keys(cardData);
    return (
      <div className="scroll-list">
        {cardData.data.Table.map((results, index) => {
          return (
            <div className="col-sm-3">
              <div className="card our-team" id="employeeInfo">
                <div className="card-body">
                  <h3 className="title">
                    {results.first_name}   </h3> 
                    <h5 className="title">{results.last_name}</h5> 
                    <h5 className="title">{results.Email}</h5>                 
                    <h5 className="title"> {results.Phone}</h5> 

                  <Link
                    to={{ pathname: `/cards/${results.id}`, state: results }}
                    className={`card-wrapper restore-${results.id}`}
                  > {results.first_name}
                  </Link>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    );
  }
}
// Main App router compoment
function App() {
  return (
    <div className="App">
      <Router>
        <div>
          <Route exact path="/" component={Cards} />
          <Route path="/cards/:id" component={Detail} />
        </div>
      </Router>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

导出默认明细；

当此链接当前单击时，我如何将数据传递到详细信息页面iam仅显示第一条记录或 class Detail extends Component { constructor(props) { super(props); this.state = { results: [] }; } render() { //const id = 0; return ( // Card details compoment <div className="card-details"> <h2>{cardData.data.Table[0].first_name}</h2> <h2>{cardData.data.Table[0].id}</h2> <Link to={{ pathname: "/", state: this.props.location.state }} > <button>Return to list</button> </Link> </div> ); } }，但我想根据记录的ID详细说明要更新的页面

{cardData.data.Table[0].first_name}, {cardData.data.Table[0].last_name}

Answer 1

好的，我已经检查了您的代码，您需要进行2项更改：从index.js文件中，您需要将链接的prop更改为：

to={{ pathname: `/cards/${results.id}`, state: results }}

在您的details.js中，将渲染功能更改为：

render() {
    const id = this.props.match.params.id;
    const data = cardData.data.Table.find(item => item.id === id)
    return (
      // Card details compoment
      <div className="card-details">
        <h2>{data.first_name}</h2>
        <h2>{data.id}</h2>

        <Link
          to={{
            pathname: "/",
            state: this.props.location.state
          }}
        >
          <button>Return to list</button>
        </Link>
      </div>
    );
  }

请注意，您要链接到/cards/${results.id}的链接中的id是数据库中记录的ID。

然后在details.js中，您从数据中找到具有参数的id的记录，并使用该记录中的数据。

您犯了2个错误：

您在index.js中链接到/cards/${results.index}，results.index未定义。
在details.js中，您引用的数据例如：

cardData.data.Table[id].first_name

但是cardData.data.Table是对象的数组，而id是对象的属性。如果该数组中至少包含1003个对象，则cardData.data.Table [id]仅返回ID为1002之类的数据。

Answer 2

在这种情况下，您可以将cardData.data.Table数据作为props传递并从..... params.id之类的路由器获取ID。

然后用cardData.data.Table [i]替换cardData.data.Table [0]。

ReactJs使用Id字段在多个组件之间传递数据

2 个答案: