onChange 事件后组件不会重新渲染

IT技术 javascript reactjs

2021-05-20 03:28:56

我已经检查了有关重新渲染的不同主题的先前答案，但找不到解决此问题的正确方法。在选择框上触发 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 中检查控制台时，props（用户）正确传递，但不能完全获得视觉效果。

2个回答

状态和生命周期

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

setState()将组件状态的更改加入队列，并告诉 React 该组件及其子组件需要使用更新后的状态重新渲染。

这里的主要思想是将性别值存储在状态中，因为我们希望在此值更改时呈现

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

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

使用setState()新值更新 onChange 事件。此函数将通知异步react有关重新渲染的需要。您需要重构一下您的逻辑，以仅通过更新状态来清理更改处理程序。请记住 setState 是异步的，可能是误解的根源。
```
  handleChange = (e) => {
     setState({gender: e.target.value});
 }
```

最终版本应该是这样的：

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()将filter根据选定的性别执行。无需存储男性和女性，因为在大多数情况下性能应该没问题。

这是您的代码的工作示例：https : //codesandbox.io/s/new-wkgu6

您没有在任何地方设置状态，因为哪个组件不会再次呈现

setState()将始终导致重新渲染，除非 shouldComponentUpdate() 返回 false。

可以在此处找到有关 setState api 的更多信息

https://reactjs.org/docs/react-component.html#setstate

其它你可能感兴趣的问题

上一篇超过最大调用堆栈大小下一篇错误：找不到module“eslint-config-flowtype”