重置反应选择组件的 state 不起作用

Question

我的 react-select 组件有两个问题：

第一个：当我设置 select 和选项时，我无法在设置 select 组件后更改选项第二个：当我的表单重置时，它不会重置 react-select 组件。

出于实际原因，这只是与问题本身有关，所以我故意留下其他输入字段并尽可能保持简短

以下是我正在使用的示例。 我使用异步请求从 api 获取我的选项，好消息是选项填充。 我遇到的问题是，一旦我选择了一个选项，我就无法更改它，并且当我提交表单时，所有其他字段而不是 select 组件都会重置。 我必须重新加载页面才能重置组件。 我能做些什么来纠正这个问题？

import React, { Component } from 'react'
import Select from 'react-select'
import axios from 'axios'
import '../index.css'



class RecipeInput extends Component{

   
    constructor(props){
        super(props)
        this.state = {
            category_id:'',
            name:'',
            ingredients:'',
            chef_name:'',
            origin:'',
            instructions:'',
            
         }
        
}


      

    
    async options(){
        const BASE_URL = `http://localhost:3002`
        const CATEGORIES_URL =`${BASE_URL}/categories`
        const res = await axios.get(CATEGORIES_URL)
        const data = res.data

        const options = data.map(options => ({
            'label' : options.category,
            'id' : options.id
        }))

        this.setState({category_id: options})
    }



    
     handleSelect = (event) =>{
        
        this.setState({category_id:event.id})
    }

    componentDidMount(){
        this.options()
    }


    handleReset = () =>{
        this.setState({ name:'', ingredients: '', chef_name: '', origin: '',instructions: '', category_id:''})
    }

   

    handleSubmit = (event) =>{
        event.preventDefault();
        this.props.postRecipes(this.state)
        this.handleReset()
              
    }

    

    render(){
       let dropdown = 'form-select form-select-sm'
        return(
            <div>
                
                <form onSubmit={(event)=>this.handleSubmit(event)} noValidate>
                    <Select  options={this.state.category_id} value={this.state.category_id} onChange={(event)=>this.handleSelect(event)} className={dropdown}/>
                   
                    <input value='submit' type='submit' />
                </form>
                
            </div>
        )
    }

}

export default RecipeInput

Answer 1

我认为您对 select 元素上的选项数组和 value 属性使用相同的 category_id state 变量。 您需要为选项属性提供选项数组和将更改为值属性的 category_id state 变量。

Answer 2

所以有一个小细节我没有人发现。 我记得的一个问题是，当您提交一个表单，其中一部分在其中发出异步请求时，组件会卸载，并且您必须在重置表单时再次安装它。

这是我对 api 的异步调用

async options(){
        const BASE_URL = `http://localhost:3002`
        const CATEGORIES_URL =`${BASE_URL}/categories`
        const res = await axios.get(CATEGORIES_URL)
        const data = res.data

        const options = data.map(options => ({
            'label' : options.category,
            'id' : options.id
        }))

        this.setState({category_id: options})
    }

这是加载页面时组件安装的位置。

 componentDidMount(){
        this.options()
    }

好吧，当您提交表单时，上面的行基本上会卸载，而我没有在表单重置时重新安装它。

这是解决它的解决方案。

handleReset = () =>{
        this.setState({ name:'', ingredients: '', chef_name: '', origin: '',instructions: '',category_id:''})
    }

   

    handleSubmit = (event) =>{
        event.preventDefault();
        this.props.postRecipes(this.state)
        this.handleReset()
        this.getOptions()
              
    }

您会在上面注意到，当我与提交按钮交互时，我只是重新安装了this.getOptions() 。