React如何将下拉菜单选中值传入componentDidMount替换硬编码ParentId

问题原因 #

1. componentDidMount 是React类组件的生命周期函数，仅会在组件首次挂载到页面后执行一次，此时你还没有操作下拉选择器，this.state.value 初始值为空，直接替换硬编码的 ParentId 自然无法得到期望结果。
2. 你目前的提交按钮事件handleSubmit仅做了选中值打印的逻辑，没有实际触发接口请求，所以选中后点击提交也不会刷新表格数据。

解决方案 #

你可以把接口请求的逻辑抽为独立的公共方法，既可以在组件挂载时调用默认值请求，也可以在提交时用选中的下拉值重新请求，修改后的完整代码如下：

import React, {Component} from 'react'
import axios from '../../axios'

export default class users extends Component {
    constructor(props) {
        super(props);
        this.state = {
            users: [],
            // 可以设置初始值为下拉第一个选项的值，匹配默认选中
            value: 'test-1'
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.fetchUserList = this.fetchUserList.bind(this);
    }

    // 抽离公共请求方法
    fetchUserList(parentId) {
        axios
            .post(`/`, { ParentId: parentId })
            .then(res => {
                const data = res.data
                const valuesArray = JSON.parse(data)
                console.log(valuesArray)

                const users = valuesArray.Accounts.map(u =>
                    <tr key={u.Id}>  
                    <td>{u.Name}</td>
                    <td>{u.Arn}</td>
                    <td>{u.Id}</td>
                    <td>{u.Email}</td>
                    <td>{u.JoinedMethod}</td>
                    <td>{u.JoinedTimestamp}</td>
                    <td>{u.Status}</td>
                    </tr>
                    )

                    this.setState({
                        users
                    })

            })
            .catch((error) => {
                console.log(error)
            })
    }

    handleChange(event) {
        this.setState({value: event.target.value});
      }
      
    handleSubmit(event) {
        event.preventDefault();
        // 提交时用当前选中的value发起请求
        this.fetchUserList(this.state.value)
    } 
    

    componentDidMount(){
        // 组件挂载时用初始value请求默认数据
        this.fetchUserList(this.state.value)
    }
  
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
            <div>
            <h1 id='awsorg'>AWS Accounts in Organization</h1>
            <div>
            <label>
          Select AWS Organization
          <select id="dropdown" value={this.state.value} onChange={this.handleChange}>
            <option value="test-1">test-1</option>
            <option value="ou-wmno-yeeol4ok">Suspended</option>
            <option value="test-3">test-3</option>
            <option value="test-4">test-4</option>
          </select>
          <input type="submit" value="Submit" />
        </label>
            </div>
            <table id='accounts'>
               <tbody>
                  <tr>
                 <th>Name</th>
                 <th>Arn</th>
                 <th>id</th>
                 <th>Email</th>
                 <th>JoinedMethod</th>
                 <th>JoinedTimestamp</th>
                 <th>Status</th>
                  </tr>
                  {this.state.users}
               </tbody>
            </table>
         </div>
         </form>
        )
    }
}

如果不需要组件加载时就请求默认数据，直接删除componentDidMount里的调用逻辑即可，只会在你点击提交按钮时用选中的下拉值发起请求。

内容的提问来源于stack exchange，提问作者Ranopriyo Neogy