Select 我在使用 setState React 时第一次触发 onChange 事件时值没有改变

Question

我有一组 select 菜单，当我 select 使用 onChange={updateValue} 事件的选项时，我试图更改一个值。当我第一个 select 一个选项时，select 菜单中的值没有更新。它只会在我第二次尝试选择一个选项时发生变化。不确定我做错了什么。

编辑：我做了更多研究 ()，我相信我也需要使用 setState 更新 select 的值。如果没有为每个值设置一个变量并重新设置状态，我不知道该怎么做。

let selectMenus = [
  {
    id: 'id1',
    name: 'name1',
    label: 'label1',
    value: '0',
    options: [
      {
        text: 'All ages',
        value: '0',
      },
      {
        text: '35 - 37 yrs',
        value: '1',
      },
    ],
    buttonLabel: 'Refresh',
  },
  {
    id: 'id2',
    name: 'name2',
    label: 'label2',
    value: '1',
    options: [
      {
        text: 'All ages',
        value: '0',
      },
      {
        text: '45 - 50 yrs',
        value: '1',
      },
    ],
    buttonLabel: 'Refresh',
  },
];

const [url, setUrl] = useState('http://localhost:5000/selectDropdowns1');

const updateValue = () => {
  setUrl('http://localhost:5000/selectDropdowns2');
};

<form>
  {selectMenus.map((select) => (
    <div key={select.id} className='select-container'>
      <label htmlFor={select.id}>{select.label}</label>
      <select id={select.id} name={select.name} value={select.value} onChange={updateValue}>
        {select.options.map((option) => (
          <option value={option.value} key={uuid()}>
            {option.text}
          </option>
        ))}
      </select>
      <button>{select.buttonLabel}</button>
    </div>
  ))}
</form>;

Answer 1

问题是，当您向 select 组件提供 onChange 道具时，它变成了 受控组件。

更多信息：React Docs - Forms #controlled components

当您处理受控组件时，您必须为其提供一个值，并且当触发 onChange 时，它应该更新该值以正常工作。由于您没有提供完整的代码，我想您有一系列 select 菜单和附加选项。

所以在这种情况下，每个 select 组件都应该有自己的 onChange 方法和自己的值才能正常工作。为了实现这一点，我们应该为 Select 选项创建另一个组件。像这样；

function SelectComponent({ optionList, onSelected }) {
  const [value, setValue] = useState();

  const updateValue = ({ target }) => {
    setValue(target.value);
    if (onSelected) onSelected(target.value);
  };

  return (
    <>
      <label htmlFor={optionList.id}>{optionList.label}</label>
      <select
        id={optionList.id}
        name={optionList.name}
        value={value}
        onChange={updateValue}
      >
        {optionList.options.map((option) => (
          <option value={option.value} key={uuid()}>
            {option.text}
          </option>
        ))}
      </select>
      <button>{optionList.buttonLabel}</button>
    </>
  );
}

这个组件接受道具； optionList 和 onSelected

optionList 是要渲染的选项列表

onSelected是我们在userselect和option

时调用的方法

在主要组件上，我们应该用我们的 select 组件更改 select 部分，并使用道具 optionList 和 onSelected

  return (
    <div>
      {selectMenus.map((select) => (
        <div key={select.id} className="select-container">
          <SelectComponent optionList={select} onSelected={updateValue} />
        </div>
      ))}
    </div>
  );

所以整体代码是这样的：

import { useState } from "react";
import { v4 as uuid } from "uuid";

export default function App() {
  const [url, setUrl] = useState();

  const updateValue = (value) => {
    setUrl(value);
  };

  const selectMenus = [
    {
      id: 1,
      label: "Menu 1",
      name: "menu1",
      buttonLabel: "Menu 1",
      options: [
        {
          text: "option 1",
          value: "option1"
        },
        {
          text: "option 2",
          value: "option2"
        },
        {
          text: "option 3",
          value: "option3"
        }
      ]
    },
    {
      id: 2,
      label: "Menu 2",
      name: "menu2",
      buttonLabel: "Menu 2",
      options: [
        {
          text: "option 1",
          value: "option1"
        },
        {
          text: "option 2",
          value: "option2"
        },
        {
          text: "option 3",
          value: "option3"
        }
      ]
    },
    {
      id: 3,
      label: "Menu 3",
      name: "menu3",
      buttonLabel: "Menu 3",
      options: [
        {
          text: "option 1",
          value: "option1"
        },
        {
          text: "option 2",
          value: "option2"
        },
        {
          text: "option 3",
          value: "option3"
        }
      ]
    }
  ];

  return (
    <div className="App">
      <h1>URL Value: {url}</h1>
      {selectMenus.map((select) => (
        <div key={select.id} className="select-container">
          <SelectComponent optionList={select} onSelected={updateValue} />
        </div>
      ))}
    </div>
  );
}

function SelectComponent({ optionList, onSelected }) {
  const [value, setValue] = useState();

  const updateValue = ({ target }) => {
    setValue(target.value);
    if (onSelected) onSelected(target.value);
  };

  return (
    <>
      <label htmlFor={optionList.id}>{optionList.label}</label>
      <select
        id={optionList.id}
        name={optionList.name}
        value={value}
        onChange={updateValue}
      >
        {optionList.options.map((option) => (
          <option value={option.value} key={uuid()}>
            {option.text}
          </option>
        ))}
      </select>
      <button>{optionList.buttonLabel}</button>
    </>
  );
}

工作示例在这里codesandbox

Select 我在使用 setState React 时第一次触发 onChange 事件时值没有改变

Select value doesnt change the first time I trigger onChange event when using setSate React

javascript

select

onchange

setstate

reactjs