无法将下拉列表中的值传递给 componentDidMount 函数

Question

在下面的代码中，我试图从实现的下拉选择中指定{ ParentId: 'ou-wmno-yeeol4ok' } 中ParentId 的值，而不是对其进行硬编码，但我不知道如何在componentDidMount() 中传递this.state.value功能。 有趣的是，如果我尝试做这样的事情{ ParentId: this.state.value } 它不起作用。 有人可以看看并帮助我。谢谢。

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

export default class users extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Users: [],
            value: ''
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({value: event.target.value});
      }
      
    handleSubmit(event) {
        //alert('Your favorite flavor is: ' + this.state.value);
        console.log( this.state.value);
        event.preventDefault();
      } 
    
  

    componentDidMount(){
        axios
            .post(`/`, { ParentId: 'ou-wmno-yeeol4ok' })
            .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)
            })
        
    }
  
    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>
        )
    }
}

Answer 1

{ ParentId: 'this.state.value' }

不起作用，因为 this.state.value 被 this char 包围了 '

试试这个

    componentDidMount(){
    let parentId = this.state.value
  axios.post(`/`, { ParentId: parentId  })
   ... rest of the code ..