从属 Select 组件未在输入字段中显示所选值

Question

有 4 个 select 组件具有相关的下拉菜单。但是当我 select 一个选项时，它没有显示在输入字段中，尽管我的 'selectedPl.nets' state 正在正确更新。

这是我的代码 -

import React, { useState } from "react";
import "../css/Destination.css";

function Destination(props) {
  const [selectedPlanets, SetselectedPlanets] = useState([
    null,
    null,
    null,
    null,
  ]);

  const OnSelectPlanet = async (e, key) => {
    const clonedSelectedPlanets = JSON.parse(JSON.stringify(selectedPlanets));
    clonedSelectedPlanets[key] = e.target.value;
    SetselectedPlanets(clonedSelectedPlanets);
  };

  const CustomSelectComponents = ({ value, options, OnSelect}) => {
    return (
      <select value={value} onChange={OnSelect}>
        <option> -- Select a Planet -- </option>
        {options.map((option) => {
          return <option key = {option.name} value={option.name} >{option.name}</option>;
        })}
      </select>
    );
  };

  const OptionsToRender = (Alloptions, AllselectedOptions, index) => {
    console.log(AllselectedOptions);
    const optionstoRender =
      AllselectedOptions[index] != null
        ? Alloptions.filter(
            (option) =>
              !AllselectedOptions.some(
                (selectedOption) =>
                  option && selectedOption && option.name === selectedOption
              )
          )
        : Alloptions;
    return optionstoRender;
  };

  return (
    <>
      <div className="Parent_Card">
        {selectedPlanets.map((planet, index) => {
          const options = OptionsToRender(props.planets, selectedPlanets, index);
          return (
            <>
            {console.log(index)}
            <CustomSelectComponents
              value={
                selectedPlanets[index] != null ? selectedPlanets[index] : ""
              }
              options={options}
              OnSelect={(e) => OnSelectPlanet(e, index)}
              key={index}
            />
            </>
          );
        })}
      </div>
    </>
  );
}

export default Destination;

我尝试调试它并认为这可能是因为我的组件渲染的方式和时间。但我不知道为什么，因此无法找到解决方案。

我的预期结果是当我选择它在输入字段中显示的选项时。

Answer 1

您的代码可以受益于几种不同的方法来构建 4 个不同的 select 组件：

• 受控组件的使用（ https://reactjs.org/docs/forms.html#controlled-components ）
• 为每个不同的选择分离 state
• 将<CustomSelectComponent />重构为只接受 props 的组件

下面是这些实践方法的示例，可能会为使这些选择按预期运行提供一些指导！

import React, { useState } from 'react';
import '../css/Destination.css';

// custom select component
const CustomSelectComponent = ({ onChange, options, value }) => (
  <select onChange={onChange} value={value}>
    <option> -- Select a Planet -- </option>
    {options.map(option => (
      <option key={option.name} value={option.name}>
        {option.name}
      </option>
    ))}
  </select>
);

const Destination = () => {
  // mock props
  const props = { planets: [{ name: 'Pluto' }, { name: 'Earth' }] };
  // separated state
  const [selectOneValue, setSelectOneValue] = useState('');
  const [selectTwoValue, setSelectTwoValue] = useState('');
  const [selectThreeValue, setSelectThreeValue] = useState('');
  const [selectFourValue, setSelectFourValue] = useState('');

  return (
    <div className="Parent_Card">
      {/* each custom select component is now controlled by it's own state */}
      <CustomSelectComponent
        onChange={e => setSelectOneValue(e.target.value)}
        options={props.planets}
        value={selectOneValue}
      />
      <CustomSelectComponent
        onChange={e => setSelectTwoValue(e.target.value)}
        options={props.planets}
        value={selectTwoValue}
      />
      <CustomSelectComponent
        onChange={e => setSelectThreeValue(e.target.value)}
        options={props.planets}
        value={selectThreeValue}
      />
      <CustomSelectComponent
        onChange={e => setSelectFourValue(e.target.value)}
        options={props.planets}
        value={selectFourValue}
      />
    </div>
  );
};

export default Destination;