why value is not set on dropdown in react js (allready set value props)?

问题

I am taking help from this link how to set value in dropdown in react js?

set the value of dropdown.but it is not setting value in dropdown.

I am getting dropdown data after few seconds 3000 and then I need to set value on dropdown

expected output Aland Islands should be selected. { key: "ax", value: "ax", text: "Aland Islands" },

here is my code https://codesandbox.io/s/sharp-rhodes-140fm

const SingleSelectAutoComplete = props => {
  const { onSearchChange, input, label, data, value } = props;
  return (
    <div>
      <label>{label}</label>
      <Dropdown
        {...props.input}
        clearable
        fluid
        search
        closeOnChange
        onChange={(e, data) => {
          return input.onChange(data.value);
        }}
        onSearchChange={onSearchChange}
        selection
        options={data}
        value={value}
        placeholder="Select Country"
      />
    </div>
  );
};




const val = "ax";
  const [state, setState] = useState([]);
  const [value, setValue] = useState([]);

  setTimeout(() => {
    setState(data);
    setValue("ax");
  }, 2000);

回答1:

Since you use final form the value is not passed, if you pass a prop that is named "value" it will disappear, call it anything else and it shows up. In this case i called it helloWorld

Maybe you should study how final-form works as I only post this as "it does something", I don't know why it does it or how you're supposed to use it.

const SingleSelectAutoComplete = props => {
  const { onSearchChange, helloWorld, label, data,onChange } = props;
  return (
    <div>
      <label>{label}</label>
      <Dropdown
        {...props.input}
        clearable
        fluid
        search
        closeOnChange
        //use the onChange function passed from App
        //it will set the App state
        onChange={(e, data) => {
          onChange(data.value);
        }}
        onSearchChange={onSearchChange}
        selection
        options={data}
        //pass value as helloWorld or final form will make
        //prop disappear if you call the prop value
        helloWorld={value}
        placeholder="Select Country"
      />
    </div>
  );
};

in App:

function App() {
  const [state, setState] = useState([]);
  //removed val and setting val in the timeout
  //you just pass the value to the useState function
  const [value, setValue] = useState("ax");

  setTimeout(() => {
    setState(data);
  }, 2000);
  //log to show that setValue is used when you change input
  console.log('value:',value)
  return (
    <div style={{ width: 600, margin: "0 auto" }}>
      <RFFORM
        onSubmit={onSubmit}
        render={({ handleSubmit, form, submitting, pristine, values }) => (
          <SForm onSubmit={handleSubmit}>
            <RFField
              component={SingleSelectAutoComplete}
              label=""
              name="ag"
              placeholder=""
              required={true}
              //passing value prop doesn't seem to do anything
              //calling it helloWorld and it'll show up
              helloWorld={value}
              data={state}
              //pass setValue as onChange or user will not be able to change it
              onChange={setValue}
            />

回答2:

The whole point of React Final Form is that it manages your form values for you, so you should not be passing a value that you are managing with useState.

If you need to initialize (or reinitialize) your form with some value from outside, you pass it to initialValues. Here's a working example. The value that your select component needs is inside the ...input.

来源：https://stackoverflow.com/questions/57622594/why-value-is-not-set-on-dropdown-in-react-js-allready-set-value-props