Javascript 设置要更新的选定下拉列表值

我有一个通过api调用填充的下拉列表。这非常有效，特别是对于insert。但是，对于update，当尝试将其设置为对象的[我们正在更新的]值时，Im有问题。 正如您在我的状态中所看到的，我有一个存储库列表，以及一个repositoryId（选定的存储库）。我从存储库创建选项项。我找到所选存储库并将其设置为下拉列表的值。但是，这会将名称而不是id保存到对象中。此外，似乎还需要在存储库中进行额外的循环才能找到所选的存储库（我们只是在其中循环创建选项项）

如何从optionItems收集所选存储库条目？ 如何设置下拉列表的选定值？ 是否有更好的方法将此下拉列表的值绑定到我的repositoryId状态变量

Update.jsx

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

import styled from 'styled-components'

const Title = styled.h1.attrs({
    className: 'h1',
})``

const Wrapper = styled.div.attrs({
    className: 'form-group',
})`
    margin: 0 30px;
`

const Label = styled.label`
    margin: 5px;
`

const InputText = styled.input.attrs({
    className: 'form-control',
})`
    margin: 5px;
`

const Button = styled.button.attrs({
    className: `btn btn-primary`,
})`
    margin: 15px 15px 15px 5px;
`

const CancelButton = styled.a.attrs({
    className: `btn btn-danger`,
})`
    margin: 15px 15px 15px 5px;
`

class StorysUpdate extends Component {
    constructor(props) {
        super(props)

        this.state = {
            id: this.props.match.params.id,
            repositories: [],
            repositoryId: '',
            name: '',
            storyText: ''
        }
    }


    handleChangeInputName = async event => {
        const name = event.target.value
        this.setState({ name })
    }

    handleChangeInputRepositoryId = async event => {
        const repositoryId = event.target.value
        this.setState({ repositoryId })
    }


    handleChangeInputStoryText = async event => {
        const storyText = event.target.value
        this.setState({ storyText })
    }


    handleUpdateStory = async () => {
        const { id, name, storyText, repositoryId } = this.state
        const payload = { name, storyText, repositoryId }

        await api.updateStoryById(id, payload).then(res => {
            window.alert(`Story updated successfully`)
            this.setState({
                name: '',
                storyText: ''
            })
        })
    }

    componentDidMount = async () => {
        let initialRepositories = [];
        api.getAllRepositories().then(response => {
            initialRepositories = response.data.data.map((repository) => {
                return repository
            });
            this.setState({
                repositories: initialRepositories
            });
        });

        const { id } = this.state
        const story = await api.getStoryById(id)

        this.setState({
            name: story.data.data.name,
            storyText: story.data.data.storyText,
            repositoryId: story.data.data.repositoryId,
        })
    }

    render() {
        const { repositories, repositoryId, name, storyText } = this.state
        let optionItems = repositories.map((repository) =>
            <option key={repository._id} value={repository.name}>{repository.name}</option>
        ); 
 
        var selectedRepository = repositories.find(repo => {
            return repo._id === repositoryId
        })
        var selectedRepositoryName='';
        if (selectedRepository) {
            selectedRepositoryName = selectedRepository.name;
        }
        return (
            <Wrapper>
                <Title>Create Story</Title>

                <Label>Repository: </Label>
                <div>
                    <select
                        onChange={this.handleChangeInputRepositoryId}
                        value={selectedRepositoryName}
                    >
                        {optionItems}
                    </select>&nbsp;

                    {/* eventually it would probably be enough to have this be a text field.  but it should hide/appear when create new is selected in drop down. */}
                    <a href="/repository/create">Create New Repository</a>
                </div>

                <Label>Name: </Label>
                <InputText
                    type="text"
                    value={name}
                    onChange={this.handleChangeInputName}
                />

                <Label>Story Text: </Label>
                <InputText
                    type="text"
                    value={storyText}
                    onChange={this.handleChangeInputStoryText}
                />

                <Button onClick={this.handleUpdateStory}>Update Story</Button>
                <CancelButton href={'/stories/list'}>Cancel</CancelButton>
            </Wrapper>
        )
    }
}

export default StorysUpdate

import React，{Component}来自“React”
从“../api”导入api
从“样式化组件”导入样式化
const Title=styled.h1.attrs({
类名：“h1”，
})``
常量包装器=styled.div.attrs({
类名：“表单组”，
})`
利润率：0.30px；
`
常量标签=styled.Label`
保证金：5px；
`
常量InputText=styled.input.attrs({
类名：“窗体控件”，
})`
保证金：5px；
`
常量按钮=styled.Button.attrs({
类名：`btn btn primary`，
})`
利润率：15px 15px 15px 5px；
`
const CancelButton=styled.a.attrs({
类名：`btn btn danger`，
})`
利润率：15px 15px 15px 5px；
`
类StorysUpdate扩展组件{
建造师（道具）{
超级（道具）
此.state={
id:this.props.match.params.id，
存储库：[]，
repositoryId:“”，
名称：“”，
故事文本：“”
}
}
handleChangeInputName=异步事件=>{
const name=event.target.value
this.setState（{name}）
}
handleChangeInputRepositoryId=异步事件=>{
常量repositoryId=event.target.value
this.setState（{repositoryId}）
}
handleChangeInputStoryText=异步事件=>{
const storyText=event.target.value
this.setState（{storyText}）
}
handleUpdateStory=async（）=>{
const{id，name，storyText，repositoryId}=this.state
常量负载={name，storyText，repositoryId}
等待api.updateStoreById（id，有效负载）。然后（res=>{
window.alert（`Story updated successfully`）
这是我的国家({
名称：“”，
故事文本：“”
})
})
}
componentDidMount=async（）=>{
设initialRepositories=[]；
api.getAllRepositories（）.then（响应=>{
initialRepositories=response.data.data.map（（存储库）=>{
返回存储库
});
这是我的国家({
存储库：初始化存储库
});
});
const{id}=this.state
const story=await api.getStoryById（id）
这是我的国家({
名称：story.data.data.name，
storyText:story.data.data.storyText，
repositoryId:story.data.data.repositoryId，
})
}
render（）{
const{repositories，repositoryId，name，storyText}=this.state
让optionItems=repositories.map（（repository）=>
{repository.name}
); 
var selectedRepository=repositories.find（repo=>{
返回repo.\u id==repositoryId
})
var selectedRepositoryName=''；
如果（选择存储）{
selectedRepositoryName=selectedRepository.name；
}
返回(
创造故事
存储库：
{optionItems}
{/*最终，将其作为一个文本字段可能就足够了。但当在下拉列表中选择“新建”时，它应该隐藏/显示。*/}
姓名：
故事文本：
更新故事
取消
)
}
}
导出默认StorysUpdate

找到了答案，请参见以下内容：

render() {
        const { repositories, repositoryId, name, storyText } = this.state
        let optionItems = repositories.map((repository) => {
            if (repositoryId === repository._id) {
                return <option selected value={repository._id} >{repository.name}</option>
            } else {
                return <option value={repository._id}  >{repository.name}</option>
            }
        });

        return (
            <Wrapper>
                <Title>Create Story</Title>

                <Label>Repository: </Label>
                <div>
                    <select
                        onChange={this.handleChangeInputRepositoryId}
                    >
                        {optionItems}
                    </select>&nbsp;

                    {/* eventually it would probably be enough to have this be a text field.  but it should hide/appear when create new is selected in drop down. */}
                    <a href="/repository/create">Create New Repository</a>
                </div>

                <Label>Name: </Label>
                <InputText
                    type="text"
                    value={name}
                    onChange={this.handleChangeInputName}
                />

                <Label>Story Text: </Label>
                <InputText
                    type="text"
                    value={storyText}
                    onChange={this.handleChangeInputStoryText}
                />

                <Button onClick={this.handleUpdateStory}>Update Story</Button>
                <CancelButton href={'/stories/list'}>Cancel</CancelButton>
            </Wrapper >
        )
    }

render（）{
const{repositories，repositoryId，name，storyText}=this.state
让optionItems=repositories.map（（repository）=>{
if（repositoryId==存储库。\u id）{
返回{repository.name}
}否则{
返回{repository.name}
}
});
返回(
创造故事
存储库：
{optionItems}
{/*最终，将其作为一个文本字段可能就足够了。但当在下拉列表中选择“新建”时，它应该隐藏/显示。*/}
姓名：
故事文本：
更新故事
取消
)
}