Блог

Я не вижу решения этой проблемы, которое, я уверен, очевидно. Классический сценарий проблемы страны / штата: форма redux с двумя полями Form.Select (semantic ui-react)

  <FormSection name="addressInfo">  
          <Field
            component={renderSelect}
            label="Country"
            fieldName="country"
            name="country"
            onChange={(newValue) =>
              change("addressInfo.provState", renderProvinceState(newValue))
            }
            options={renderCountries()}
          />
          <Field
            component={renderSelect}
            label="Province/State"
            fieldName="provState"
            name="provState"
            multiple
            options={renderProvinceState("Canada")}
          />
  

мои разработчики опций следующие:

   const renderCountries = () => {
    
    if (!countries) return null;
    var options = [];
    Object.keys(countries).map((key) => {
      options.push({
        key: key,
        text: countries[key].country,
        value: countries[key].country,
      });
      return null;
    });
    return options;
  };

  const renderProvinceState = (country) => {
    if (!country) return null;
    var states = countries.filter((s) => s.country == country)[0].states;

    if (!states) return null;
    var options = [];
    Object.keys(states).map((key) => {
      options.push({
        key: key,
        text: states[key],
        value: states[key],
      });
      return null;
    });
    return options;
  };

  

мои выпадающие списки успешно создаются, я получаю список стран и провинций для Канады. Когда я меняю страну, я получаю следующие ошибки:

 index.js:1 Dropdown `value` must not be an array when `multiple` is not set. Either set `multiple={true}` or use a string or number value.
Warning: Failed prop type: Invalid prop `value` supplied to `Dropdown`.
  

Я новичок в react, react-redux и был бы признателен за любую информацию, которая может у кого-то быть. Я попытался добавить значение ={[]} в provState obj, но это ничего не исправило.

фактический компонент, с которым я работаю, выглядит следующим образом:

 export const renderSelect = ({
  label,
  meta,
  input,
  name,
  options,
  placeholder,
}) => {
  return (
    <Form.Select
      className={`${meta.error amp;amp; meta.touched ? "error" : ""}`}
      label={label}
      name={input.name}
      onChange={(e, { value }) => input.onChange(value)}
      options={options}
      placeholder={placeholder}
      value={input.value}
    />
  );
};