在 `render()` 、 `handleSubmit()` 、 `handleChange()` 之外访问具有当前状态的状态变量答案

【问题标题】：Accessing state variable with current state outside `render()` , `handleSubmit()`, `handleChange()`在 `render()` 、 `handleSubmit()` 、 `handleChange()` 之外访问具有当前状态的状态变量
【发布时间】：2021-11-10 16:05:10
【问题描述】：

有没有办法可以在 render()、handleSubmit()、handleChange() 以外的其他函数中呈现更新的状态变量值

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);
        event.preventDefault();
        console.log(this.state.value)
      }

【问题讨论】：

标签： reactjs react-native react-redux react-hooks react-router

【解决方案1】：

您可以在任何地方访问它们...

参见foo中的示例

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);
    }

    foo() {
     const {Users, value} = this.state
     console.log(Users, value)
    }

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

【讨论】：

我按照您的建议做了，只是在此之上用用例进行了响应，如果我尝试访问 componentDidMount 内部，似乎总是选择默认值而不是当前状态值。不知道怎么解决。
提交时，您并未将 state.value 设置为新设置，而是将其设置为当前状态。你打算这样做吗？
感谢@TR3，当我在handleSubmit() 中调用foo() 时，它对我有用。通过这种方式，我能够根据下拉选择获取当前状态更改。

【解决方案2】：

它总是指默认值value: ''，尽管如果你看到我的渲染函数，我正在使用 setState 来设置下拉选择的当前值。我希望将选定的下拉值传递给ParentId: 'ou-wmno-rbeuj1z4'，而不是在componentDidMount() 中硬编码。

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);
    }

    handleChange(event) {
        this.setState({value: event.target.value});
      }
      
    handleSubmit(event) {
        this.setState({value: this.state.value});
        event.preventDefault();
        // console.log(this.state.value)
      } 

      foo() {
        const {value} = this.state
        console.log( value)
       }

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

【讨论】：