javascript - onChange 事件后组件未重新渲染

Question

我已经检查了之前关于重新渲染的不同主题的答案，但找不到解决此问题的正确方法。我试图在选择框上触发 onChange 事件后重新渲染组件。

我有一个包含 5 个用户的用户列表，我将他们分成性别数组。所以我有一个男性数组和一个女性数组。我试图在 onChange 事件后显示选定的性别用户列表。

我尝试在组件中使用“key”属性，但没有成功。

这是我的 UserList 容器:

import React, { Component } from "react";
import ReactDOM from "react-dom";

import { connect } from 'react-redux';
import PropTypes from 'prop-types';

import List from '../components/List.jsx'

class UserList extends Component {

    constructor(props) {
         super(props);
     }

    renderUser = (toMap) => {
        console.log(toMap);
    return (
            <List key = {toMap.length} users = {toMap}/>
        );
  }

    renderSelect = () => {
    return (
            <select id="gender" onChange={this.handleChange}>
        <option value="select">Select a gender</option>
        <option value="males">Males</option>
        <option value="females">Females</option>
      </select>
        );
  }

    handleChange = (e) => {
        const {userList,males,females} = this.props;
        const gender = e.target.value;

        if(gender == 'males'){
            return this.renderUser(males);
        }else if(gender == 'females'){
            return this.renderUser(females);
        }
        return this.renderUser(userList);
    }

  render() {
        const {isLoading,error,userList} = this.props;

         return (
             <div>
                 {this.renderSelect()}
           <ul>
                    {this.renderUser(userList)}
           </ul>
                </div>
     );
    }
}

export default connect(mapStateToProps)(UserList);

这是我的列表组件:

import React from 'react';

const List = ({users}) => (
    <ul>
        {users.map( (user,index) => (
          <li key = {index} >{user.email}</li>
        ))}
    </ul>
);

export default List;

当我检查handleChange中的控制台时， Prop (用户)正确传递，但无法获得视觉结果。

Answer 1

状态和生命周期

您应该使用state / setState作为触发 react 渲染的一种方式。

setState() enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the updated state.

这里的主要思想是将性别值存储在状态中，因为我们希望在该值更改时进行渲染

1. 在构造函数上添加初始状态

   constructor(props) {
        super(props);
        this.state = {
            gender: []
        }
    }
   

2. 更新 onChange 事件，使用带有新值的 setState()。该函数将通知异步 react 需要重新渲染。您需要重构一些逻辑，以仅通过更新状态来清理更改处理程序。请记住 setState 是异步的，可能会引起误解。

     handleChange = (e) => {
        setState({gender: e.target.value});
    }
   

3. 最终版本应如下所示:

   import React, { Component } from "react";
   import ReactDOM from "react-dom";
   
   import { connect } from 'react-redux';
   import PropTypes from 'prop-types';
   
   import List from '../components/List.jsx'
   
   class UserList extends Component {
   
     constructor(props) {
       super(props);
       this.state = { gender: null };
     }
   
     renderUser = (toMap) => {
       return (
           <List 
               key = {toMap.length} 
               users = {toMap.filter(user => this.state.gender ? user.gender === this.state.gender : true)}/>
         );
     }
   
     renderSelect = () => {
       return (
         <select id="gender" onChange={this.handleChange}>
           <option value="select">Select a gender</option>
           <option value="males">Males</option>
           <option value="females">Females</option>
         </select>
       );
     }
   
     handleChange = (e) => {
       this.setState({ gender: e.target.value})
     }
   
     render() {
       const {isLoading,error,userList} = this.props;
   
       return (
         <div>
           { this.renderSelect() }
           <ul>
             { this.renderUser(userList) }
           </ul>
         </div>
       );
     }
   }
   

   renderUser() 将根据所选性别执行过滤器。无需存储男性和女性，因为大多数情况下性能应该很好。