Question

我正在使用React Reactive Forms，我有两个组件，分别是“ SelectInput”组件和带有React Reactive Forms中的FieldControl的父组件。我调用一个API从后端获取所有客户端，并使用useState挂钩存储它们，当承诺结束时，我想将此客户端传递给我的SelectInput，但它只渲染一次，因此第一次渲染客户端等于[]在调用API之前

反正有这项工作吗？

在这里我调用SelectInput并传递“客户端”内部的内容

<FieldControl
    name="client"
    render={props => <SelectInput {...props} />}
    meta={{
    label: 'Client',
    options: clients
    }}
/>

这是我的SelectInput组件

import React from 'react';
const SelectInput = ({ handler, touched, hasError, meta }) => {
    return (
        <div key={meta} className="ml-2 mt-2 w-full self-auto">
            <p className="text-gray-700 text-lg">{meta.label}</p>
            <select
                className={`flex-grow form-control outline-none ${
                    (touched && hasError('required')) || hasError('notExist') ? 'error' : ''
                }`}
                {...handler()}
            >
                <option value="Default">Select one option</option>
                {meta.options.map(option => {
                    return (
                        <option key={option.value} value={option.value}>
                            {option.label}
                        </option>
                    );
                })}
            </select>
            <div>
                {touched && hasError('required') ? (
                    <p className="text-red-700 text-xs">Field {meta.label} is required</p>
                ) : null}
            </div>
        </div>
    );
};

export default SelectInput;

Answer 1

将strict={false}传递给FieldControl可能会有帮助。

重新呈现FieldControl反应的反应形式

1 个答案: