React通过单个onChange事件控制多元素显隐时state无法更新问题

代码问题说明 #

• 初始state中所有开关值被错误设置为字符串'false'，JS中非空字符串在条件判断时会被判定为真值，导致条件渲染逻辑完全不生效
• 调用setState时直接写valueselect作为键名，是固定新增了名为valueselect的state字段，没有使用变量的值作为动态键名，需要用计算属性语法[变量名]实现动态指定更新的state键
• 三元运算符逻辑完全错误："show" ? true : false中的"show"是固定字符串，永远判定为真，不会根据选中值变化
• 下拉选项的value值和你定义的state键名没有做匹配映射：比如选中值为show时要对应更新featuredFilm字段，你没有处理这层对应关系
• 连续多次调用setState没有必要，可以合并为一次更新操作

修正后完整代码 #

import React from 'react';

class WorkExperienceForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      featuredFilm: false,
      showBank: false,
      showWebseries: false,
      showDocumentary: false
    }
  }

  showhide = (e) => {
    const valueselect = e.target.value;
    // 下拉value和state键名的映射关系
    const keyMap = {
      show: 'featuredFilm',
      bank: 'showBank',
      webseries: 'showWebseries',
      documentary: 'showDocumentary'
    };
    // 先把所有开关设为false，再把选中的对应开关设为true
    const newState = {
      featuredFilm: false,
      showBank: false,
      showWebseries: false,
      showDocumentary: false
    };
    if (keyMap[valueselect]) {
      newState[keyMap[valueselect]] = true;
    }
    this.setState(newState);
  };

  render() {
    return (
        <div>
            <div className="actorprofile">
                <section className="ds ms page_testimonials section_padding_50" style={{ backgroundImage: 'url(./assets/images/parallax/grey_bg.png)' }}>
                    <div className="container" style={{ width: '1800px' }}>
                        <div className="row vertical-tabs">
                            <div className="tab-content no-border">
                                <div className="tab-pane fade in active" id="vertical-tab9">
                                    <div className="row">
                                        <div className="col-md-6">
                                            <h3 className="showbase_header">Let the world know about your work experience</h3>
                                            <div class="row">
                                                <div className="form-group">
                                                    <div class="col-sm-12">
                                                        <label htmlFor="Category">Category</label>
                                                        <span className="required">*</span>
                                                        <select className="form-control" onChange={this.showhide}>
                                                            <option value="">Select</option>
                                                            <option value="show">Featured Film</option>
                                                            <option value="bank">Short Film</option>
                                                            <option value="webseries">Web Series</option>
                                                            <option value="documentary">Documentary</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            {this.state.featuredFilm &&
                                                <div>Featured Film 对应内容</div>
                                            }
                                            {this.state.showBank &&
                                                <div>Short Film 对应内容</div>
                                            }
                                            {this.state.showWebseries &&
                                                <div>Web Series 对应内容</div>
                                            }
                                            {this.state.showDocumentary &&
                                                <div>Documentary 对应内容</div>
                                            }
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    );
  }
}

export default WorkExperienceForm;

内容的提问来源于stack exchange，提问作者Narayan P.