React-Redux - Get User by 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创建)在路由(由Context.Consumer创建)在路由(由应用程序创建)在PrivateRoute (由应用程序创建)在交换机(由应用程序创建)在路由器(由应用程序创建)在div (由应用程序创建)在应用程序(由ConnectFunction创建)在提供商的ConnectFunction中

编辑:已修复this.props.getUser @handleUserByID，但仍不起作用编辑topicBy

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)