Question

如何将Redux中在一个组件中获得的数据传递到另一组件。

let map_usersList = users.data && users.data.map((userlist => (

...
...       <ul>
              {map_usersList}
          </ul>

在同一search.js组件中，结果显示正常。

问题是当我有一个单独的组件来显示列表和结果时：

import SearchResult from './Result/searchResult'

这是 searchResult.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import AppLink from '../../../others/link/link'


class SearchResult extends Component {

SearchResult.propTypes = {
  id: PropTypes.number.isRequired,
  username: PropTypes.string.isRequired,
}

export default SearchResult

我正在计数，但数据中什么也没有。例如，user_id是未定义的。

Answer 1

确定要使用正确的对象属性名称吗？我们看到您使用userlist.id作为密钥。因此，您的用户值必须类似于：{ id: 1, username: "foo" }，但是，在SearchResult组件中，您将使用诸如user_id，user_username之类的变量。这是一个简单的示例，主要包含您的代码。

const users = [
  { id: 1, username: "foo" },
  { id: 2, username: "bar" },
  { id: 3, username: "baz" },
];

class App extends React.Component {
  render() {
    let map_usersList = users && users.map(userlist => (
      <SearchResult key={userlist.id} {...userlist} />
    ));

    return <div>{map_usersList}</div>;
  }
}

class SearchResult extends React.Component {
  render() {
    let {
      id,
      username,
    } = this.props

    console.log("USER IS IS     " + id)

    return (
      <div className="noti follow_noti">
      <p>User Id: {id}, Username: {username}</p>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

React Redux-将数据从状态传递到另一个组件以显示结果列表

1 个答案: