reactjs - 如何重新呈现由下拉列表选择的字段？

Question

我使用 react-hook-from 创建了一个表单，我创建的字段之一是动态下拉列表。每当我选择其中一个选项来呈现其他一些文本字段时，都取决于下拉选择。问题是当我提交时，我得到了另一个下拉选择的字段，这是我的代码：

<FormGroup>
            <Label>Automation Team</Label>
            <Controller
                name="team"
                control={control}
                as={Select}
                options={ teams.map((team, index) => (
                    { value: team.name, label: team.name}
                )) }
                defaultValue="Select component"
                rules={{required: "Role is required" }}
                isClearable
            />

        </FormGroup>
        <Row form>
        {
            getFields(teamComponent).map((field,index) => (
            <Col key={index} md={4}>
                <Label for={field}>{field}</Label>
                <Input name={field} placeholder="with a placeholder" innerRef={register({required: true})}/>
                {errors?.field?.types?.required &&
                <small className="text-danger">Database name required</small>}
            </Col>

        ) )
        }
        </Row>

标签： reactjsreact-hooksreact-hook-form

Answer 1

所以问题是我没有使用 useEffect 并且没有从最后呈现的字段中注销。不是对我有用的最干净的代码位:)。所以我重构了我的代码，看起来像这样：

function TicketForm () {
const { register, unregister, handleSubmit,  reset, formState: {isSubmitSuccessful, errors}, control, watch } = useForm({
    mode: "onBlur",
    criteriaMode: "all"
});

const teamComponent = watch("team")
const {isAuthenticated} = useAuthentication();
const [teams, setTeams] = useState([])
const [fields, setFields] = useState(0);

useEffect( () => {

    if (isAuthenticated === true) {

         getConfigurations(async response => {
            setTeams(response.data.teams.Teams)
        })
    }

    if (teamComponent )
        onTeamChange(teamComponent)

}, [teamComponent])



const handleRegistration = async data => {
    console.log(data)
}


const onTeamChange = c => {

    if (!c) {
        setFields([])
        return
    }

    if (fields) {
        fields.map((field,index) => {
            unregister(field)
        })

    }

    const result = teams.filter((team, index) => {
        if(team.name === c.value) {
            return team
        }
    })

    if (result) {

        setFields(result[0].Fields)
        console.log(fields)
    }


}
return (

    <Form onSubmit={handleSubmit(handleRegistration)}>
        <FormGroup>
            <Label>Summary</Label>
            <Input name="summary" innerRef={register({required: true})} />
                {errors?.summary?.types?.required && <small className="text-danger">summary required</small>}

        </FormGroup>
        <FormGroup>
            <Label>Description</Label>
            <Input
                type="textarea"
                name="description"
                innerRef={register({required: true})}
            />
            {errors?.description?.types?.required && <small className="text-danger">description required</small>}
        </FormGroup>
        <FormGroup>
            <Label for='team'>Automation Team</Label>
            <Controller
                control={control}
                name="team"

                innerRef={register({required: true})}
                as={Select}

                
                options={ teams.map((team, index) => (
                    { value: team.name, label: team.name}
                )) }
                defaultValue=""
                isClearable
            />

        </FormGroup>
        <Row form>
        {
            fields && fields.map((field,index) => {
                //const fieldName = `field[${index}]`;
                return (

                    <fieldset name={field} key={index}>
                        <Label for={field}>{field}</Label>
                        <Input name={field} placeholder="" innerRef={register({required: true})}/>
                    </fieldset>

                )




            }/*(

            <Col key={index} md={4}>
                <Label for={field}>{field}</Label>
                <Input name={field} placeholder="with a placeholder" innerRef={register({required: true})}/>
                {errors?.field?.types?.required &&
                <small className="text-danger">Database name required</small>}
            </Col>

        )*/ )
        }
        </Row>

        <Button type='submit' color="primary">Submit</Button>

    </Form>


);}export default TicketForm;