React Hook中React-Select筛选功能失效问题求助

我帮你定位到了两个核心问题，导致选中的安全问题没有被过滤移除，咱们一步步修复：

问题1：直接修改State数组，React未检测到状态更新 #

你在handleQuestionValChange里直接赋值数组引用：

const newQuestionVals = questionVals
newQuestionVals[index] = option
setQuestionVals(newQuestionVals)

这只是复制了数组的引用，没有创建新数组。React的状态更新依赖于引用变化，所以这种修改不会触发组件重渲染，后续的getAvailableOptions拿到的还是旧的状态值。

问题2：对象引用比较导致过滤逻辑失效 #

getAvailableOptions里用indexOf判断对象是否存在：

return questionVals.indexOf(questionOption) === -1

因为对象是引用类型，questionVals里的选项和securityQuestions里的对象不是同一个引用（即使内容一样），所以indexOf永远返回-1，等于没有过滤。

修复后的完整代码 #

import { useState } from 'react';
import { Form, Select, Alert, Button } from 'react-bootstrap'; // 假设你使用react-bootstrap

// 把安全问题抽成常量，避免重复定义
const ALL_SECURITY_QUESTIONS = [
  { value: "favoriteBook", label: "What is your favorite book?" },
  { value: "roadYouGrewUpOn", label: "What is the name of the road you grew up on?"},
  { value: "motherMaidenName", label: "What is your mother’s maiden name?" },
  { value: "nameOfPet", label: "What was the name of your first/current/favorite pet?"},
  { value: "firstCompany", label: "What was the first company that you worked for?"},
  { value: "meetSpouse", label: "Where did you meet your spouse?" },
  { value: "highSchoolCollege", label: "Where did you go to high school/college?" },
  { value: "favoriteFood", label: "What is your favorite food?" },
  { value: "cityBorn", label: "What city were you born in?" },
  { value: "vacationPlace", label: "Where is your favorite place to vacation?" }
];

const SecurityQuestionForm = ({ t, changeButtonColor, signupButtonRef, error }) => {
  const [questionVals, setQuestionVals] = useState([
    {value: "", label: "Choose..."}, 
    {value: "", label: "Choose..."}, 
    {value: "", label: "Choose..."}
  ]);

  // 实时计算可用选项，不需要单独维护状态
  const getAvailableOptions = () => {
    // 提取已选中的非空问题value
    const selectedValues = questionVals
      .filter(q => q.value !== "")
      .map(q => q.value);
    
    // 过滤掉已选问题，保留默认选项
    return [
      {value: "", label: "Choose..."},
      ...ALL_SECURITY_QUESTIONS.filter(q => !selectedValues.includes(q.value))
    ];
  };

  const handleQuestionValChange = (option, index) => {
    // 创建新数组，确保状态是immutable的
    const newQuestionVals = [...questionVals];
    newQuestionVals[index] = option;
    setQuestionVals(newQuestionVals);
  };

  const availableOptions = getAvailableOptions();

  return (
    <Form>
      <Form.Label htmlFor="question1">Question 1</Form.Label>
      <Select 
        name="filters" 
        placeholder="Choose..." 
        value={questionVals[0]} 
        options={availableOptions} 
        onChange={(e) => handleQuestionValChange(e, 0)} 
        required
      />
      <div className="mt-3"></div>
      <Form.Control 
        required 
        id="securityQuestionOne" 
        name="securityQuestionOne" 
        placeholder="Type your answer here" 
        onChange={(e)=>{/* setSecurityQuestionOneAnswer(e.target.value) */}} 
        onKeyUp={changeButtonColor} 
      />
      <div className="mt-3"></div>

      <Form.Label htmlFor="question2">Question 2</Form.Label>
      <Select 
        name="filters" 
        placeholder="Choose..." 
        value={questionVals[1]} 
        options={availableOptions} 
        onChange={(e) => handleQuestionValChange(e, 1)} 
        required
      />
      <div className="mt-3"></div>
      <Form.Control 
        required 
        id="securityQuestionTwo" 
        name="securityQuestionTwo" 
        placeholder="Type your answer here" 
        onChange={(e)=>{/* setSecurityQuestionTwoAnswer(e.target.value) */}} 
        onKeyUp={changeButtonColor} 
      />
      <div className="mt-3"></div>

      <Form.Label htmlFor="question3">Question 3</Form.Label>
      <Select 
        name="filters" 
        placeholder="Choose..." 
        value={questionVals[2]} 
        options={availableOptions} 
        onChange={(e) => handleQuestionValChange(e, 2)} 
        required
      />
      <div className="mt-3"></div>
      <Form.Control 
        required 
        id="securityQuestionThree" 
        name="securityQuestionThree" 
        placeholder="Type your answer here" 
        onChange={(e)=>{/* setSecurityQuestionThreeAnswer(e.target.value) */}} 
        onKeyUp={changeButtonColor} 
      />
      <div className="mt-5"></div>

      {error && error.map((err, i) => (
        <Alert className="mt-3" variant='danger' key={i}>{err}</Alert>
      ))}
      <Button size="lg" className="w-100 mb-3" type="submit" ref={signupButtonRef}>
        {t('signup')}
      </Button>
    </Form>
  );
};

export default SecurityQuestionForm;

关键修改说明 #

1. Immutable状态更新：用[...questionVals]创建新数组，确保React能检测到状态变化并触发重渲染。
2. 基于value的过滤逻辑：通过比较value属性（唯一标识）来判断问题是否已被选中，而不是比较对象引用，这才是正确的方式。
3. 移除冗余状态：不再单独维护availableOptions和securityQuestions状态，而是把所有安全问题定义成常量，渲染时实时计算可用选项，避免状态不同步的问题。
4. 默认选项处理：在可用选项里始终保留默认的Choose...选项，同时过滤掉已选中的非空问题。

这样修改后，当你在第一个选择框选中问题后，第二个和第三个选择框就会自动移除已选的选项了。

内容的提问来源于stack exchange，提问作者Zubair Amjad