reactjs - 不在反应选择中呈现选择值

Question

我已经创建了 3 个条件列表，react-select但第三个元素无法呈现所选值，我正在尝试更新它，useEffect但我不知道它是否正确。

我的代码示例：

import React, { useState, useEffect } from "react";
import Select from "react-select";
import data from "../data.json";


const Dropdowns = ()=>{

  const [product, setProduct] = useState(null);
  const [type, setType] = useState(null);
  const [typesList, setTypesList] = useState(null);
  const [title, setTitle] = useState(null);
  const [titlesList, setTitlesList] = useState(null);

// handle change event of the product dropdown
const handleProductChange = (obj) => {
  setProduct(obj);
  setTypesList(obj.types)
  setType(null);

 
};

// handle change event of the types dropdown
const handleTypesChange = (obj) => {
  setType(obj);
 
  setTitlesList(obj.titles);

  
};
// handle change event of the titles dropdown
const handleTitlesChange = (obj) => {
  setTitle(obj);
 
};

useEffect( () => {
  if ( title ) {
  setTitle(title)
 
  }
}, [title])

return (
<>

<br />
          <h3>Products</h3>
          <Select
            placeholder="Select Product"
            value={ product }
            options={ data }
            onChange={ handleProductChange }
            getOptionLabel={ (x) => x.product }
            
            
          />
          <br />
          <h3>Types</h3>
          <Select
            placeholder="Select Types"
            value={ type }
            options={ typesList }
            onChange={ handleTypesChange }
            getOptionLabel={ (x) => x.type }
           
            
          />
          <br />
          <h3>Titles</h3>
          <Select
            placeholder="Select Title"
            value={ title }
            options={ titlesList }
            onChange={ handleTitlesChange }
            getOptionLabel={ (x) => x }
            
          
          />
</>
)


}

export default Dropdowns;

非常感谢您的帮助！

标签： reactjsuse-effectreact-select