React-Redux - 通过 ID 获取用户

Question

所以我试图通过仅提供用户 ID 从我的 redux 商店获取用户。

我的代码与 bEtTy Barnes 的代码几乎一模一样：

React Redux action object is undefined

我正在尝试将 TopicCard 组件中的用户名粘贴到 topicBy，但我只有 user_id。这就是为什么我想调用 this.handleUserByID(topics.topic_by) 但它不起作用。我还添加了一些 console.logs 来显示代码的行为方式。

第一次修复后： 我现在收到此错误： react-dom.development.js:21 警告：在渲染不同的组件 KeyboardPage 时无法更新组件 ConnectFunction。要在 KeyboardPage 中找到错误的 setState() 调用，请按照堆栈跟踪中的说明进行操作 在 KeyboardPage 中（由 ConnectFunction 创建） 在 ConnectFunction 中（由 Context.Consumer 创建） 在 Route 中（由 PrivateRoute 创建） 在 PrivateRoute（由 App 创建） 在 Switch（由 App 创建） 在Router中（由App创建） 在 div 中（由 App 创建） 在 div 中（由 App 创建） 在 div 中（由 App 创建） 在 App 中（由 ConnectFunction 创建） 在 ConnectFunction 中 在提供者中

编辑：修复 this.props.getUser @handleUserByID 但它仍然不起作用 编辑主题作者

import React, {useEffect} from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';

import {topicActions, userActions} from '../../../actions';

import NavBar from '../../NavBar/NavBar';
import TopicCard from "../../ContentCard/TopicCard/TopicCard";

class KeyboardPage extends React.Component {

componentDidMount() {
    this.props.getTopics(2);
}

handleUserByID(user_id){
   return this.props.getUser(user_id);
}

render() {

    const { topics } = this.props;
    const { user, users} = this.props;

    //console.log(this.props.getUser(1)) *Works but gets called multiple times and returns the correct user object
    console.log(this.handleUserByID(1)); * Doesnt work;

    return (
        <div className="container">
            <NavBar loggedinAs={user.user_name}/>
            <h1>Gruppe 1 - Webforum</h1>
            <h3>Topics :</h3>
            {topics.loading && <em>Loading topics...</em>}
            {topics.error && <span className="text-danger">ERROR: {topics.error}</span>}
            {topics.items && users.items &&
            <ul type='none' >
                {topics.items.map((topic, index) =>
                    <li key={topic.topic_id}>
                        <p/>
                        <a href={"/" + topic.topic_id} style={{ textDecoration: 'none' }}>
                            <TopicCard topicSubject={topic.topic_subject} topicDate={topic.topic_date} topicBy={this.handleUserByID(topic.topic_by).user_name}/>
                        </a>
                    </li>
                )}
            </ul>
            }

        </div>
    );
}
}



      function mapState(state) {
          const {topics } = state;
          const { users, authentication } = state;
          const { user, } = authentication;
          return { user, users, topics};
      }
    
      const actionCreators = {
         getTopics: topicActions.getAllbyID,
         getUser: userActions.getById
      }
    
      const connectedKeyboardPage = connect(mapState, actionCreators)(KeyboardPage);
      export { connectedKeyboardPage as KeyboardPage };

Answer 1

您不会从任何地方调用 handleUserByID。

import React, {useEffect} from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';

import {topicActions, userActions} from '../../../actions';

import NavBar from '../../NavBar/NavBar';
import TopicCard from "../../ContentCard/TopicCard/TopicCard";

class KeyboardPage extends React.Component {

componentDidMount() {
    this.props.getTopics(2);
}

handleUserByID(user_id){
   return(e) => this.getUser(user_id);
}

render() {

    const { topics } = this.props;
    const { user, users} = this.props;

    //console.log(this.props.getUser(1)) *Works but gets called multiple times and returns the correct user object
    //console.log(this.handleUserByID(1)); * Doesnt work;

    return (
        <div className="container">
            <NavBar loggedinAs={user.user_name}/>
            <h1>Gruppe 1 - Webforum</h1>
            <h3>Topics :</h3>
            {topics.loading && <em>Loading topics...</em>}
            {topics.error && <span className="text-danger">ERROR: {topics.error}</span>}
            {topics.items && users.items &&
            <ul type='none' >
                {topics.items.map((topic, index) =>
                    <li key={topic.topic_id}>
                    onClick={()=> this.handleUserByID(topic.topic_id)}
                        <p/>
                        <a href={"/" + topic.topic_id} style={{ textDecoration: 'none' }}>
                            <TopicCard topicSubject={topic.topic_subject} topicDate={topic.topic_date} topicBy={topic.topic_by}/>
                        </a>
                    </li>
                )}
            </ul>
            }

        </div>
    );
}
}



      function mapState(state) {
          const {topics } = state;
          const { users, authentication } = state;
          const { user, } = authentication;
          return { user, users, topics};
      }
    
      const actionCreators = {
         getTopics: topicActions.getAllbyID,
         getUser: userActions.getById
      }
    
      const connectedKeyboardPage = connect(mapState, actionCreators)(KeyboardPage);
      export { connectedKeyboardPage as KeyboardPage };

Answer 2

此代码中的错误在于您构造handleUserByID 函数的方式。您在此处的代码通过使用内联 lambda 创建了一个返回另一个函数的函数：

// function
handleUserByID(user_id) {
   return (e) => this.props.getUser(user_id); // Same as () => {}, or a function f(e)
}

由于您要从handleUserByID() 返回一个函数，因此要获得getUser(user_id) 的返回值，您可以使用this.handleUserByID(id)()。

或者，您可以更改函数以返回值：

handleUserByID(user_id){
   return this.props.getUser(user_id); // Returns value or User type
}

然后你可以像以前那样调用它：

console.log(this.handleUserByID(1)); //Prints the return of getUser(1)