javascript - react 选择 onChange 不改变选择的值

Question

我有一个 React 组件，它呈现了一些 html，其中一部分 html 是一个选择元素。下面的代码用于显示初始选择元素的默认值，并在您选择另一个元素时更改所选值。

我的问题是我有一个人员列表，当您单击其中一个时，使用它的页面部分的值会更新为该人的值(姓名、电子邮件等)。我相信这些都正确更新，因为 this.props.agent 得到更新。我目前不了解该代码。我的问题是 select 元素没有考虑 this.props.agent 中的更改，因此为 team 重新选择了正确的保存值。我确信在 constructor() 中使用 state 不是正确的方法。

我是 React 的新手，所以如果我的问题不准确或解释得不够好，请原谅我。但是，当 this.props.agent 更新时，如何让它更新预选的选择选项？

import React from 'react'
import axios from 'axios'

export class AgentTeam extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            teams: [],
            selectedTeam: this.props.agent.team || ''
        }

        this.handleOnClick = this.handleOnClick.bind(this)
        this.handleOnChange = this.handleOnChange.bind(this)
    }

    componentDidMount() {
        axios.get(
            ... ajax setup ...
        ).then(response => {
            this.setState({
                teams: response.data,
            })
        }).catch(error => {
            throw error
        })
    }

    handleOnClick() {
        const selectedTeam = document.querySelector('.team-selection').value

        axios.post( ...ajax stuff... )
    }

    handleOnChange = (event) => {
        this.setState({
            selectedTeam: event.target.value
        })
    }

    render() {
        const teamList = this.state.teams.map((team, i) =>
            <option value={team.team_name} key={i}>
                {team.team_name}
            </option>
        )

        return (
            <div>
                <div className='agent-team-heading'>
                    <span>Team</span>
                </div>
                <div className='agent-team-selector'>
                    <select className='team-selection' value={this.state.selectedTeam} onChange={this.handleOnChange}>
                        <option value=''>Assign Team</option>
                        {teamList}
                    </select>
                    <button className="agent-team-button" onClick={this.handleOnClick}>
                        <span>SAVE</span>
                    </button>
                </div>
            </div>
        )
    }
}

Answer 1

您可以使用 componentDidUpdate() 来检查传入的 props 是否不同:

componentDidUpdate(nextProps) {
  if (nextProps.agent.team !== this.props.agent.team) {
    this.setState({ selectedTeam: nextProps.agent.team })
  }
}

在componentDidUpdate中，nextProps代表传入的props。这将检查它们是否不同，并且 setState 将确保组件重新呈现。

此外，这将在组件首次接收到 props 时运行，这意味着您不必在状态中设置默认值。

注意:您正在混合方法，通过使用 querySelector 获取选择菜单的值。理想情况下，您会使用状态中的值 - 这样您就可以确保设置和获取正确的值，而不是混合方法并可能获取未更新的版本。