Question

我的React下拉列表有问题，我想在列表中预先选择一个值，但我不知道该怎么做。例如：在列表中选择一个值之前，我想要在选择一个值之前先获得一个值，例如，我从数据库中获取的第一个元素。
App类：

    class App extends Component {
      constructor(props) {
        super(props);

        this.state = {
          data: [],
          station: [],
          stationValue: ''
        }
      }

      getParking = async () => {
        try {
          const reponse = await axios.get(URL + "station/");
          this.setState({
            station: reponse.data['hydra:member']
          });
        } catch (e) {
          console.log(e)
        }
      };

      getData = async () => {
        try {
          const response = await axios.get(URL + "events?station=" + this.state.stationValue);
          this.setState({
            data: response.data["hydra:member"]
          });
        } catch (error) {
          console.log(error)
        }
      };

      componentDidMount() {
        this.getData();
        this.getParking()

        setInterval(this.appendData, 1000)
      }

setStation=(stationValue)=>{
 this.setState({stationValue:stationValue})
}

      render() {
        const {data, station} = this.state;
        return (
          <div>
            <header>
              <Dropdown dataStation={station} setStation={this.setStation} value={this.handleChange}/>
            </header>
            {
              data.map((item, key) =>
                <div key={key}>
                  <>
                    {item.label}
                  </>
                </div>
              )
            }
          </div>
        )
      }
    }

composent DropDown：

const Dropdown = ({dataStation, setParking, value}) => {
    const [showMenu, setShowMenu] = useState(false);
    const [selectItem, setSelectItem] = useState(showMenu);

    const showList = () => {
      setShowMenu(!showMenu)
    };

    const toggleSelected = (list) => {
      setSelectItem(list.name);
      setShowMenu(false)
    };

    return (
      <>
        <div className="dropdown-list-style" onClick={showList}>
          <div style={{display: 'inline'}}>
            {showMenu
              ? (<div style={{textAlign: 'right'}}><ChevronUp/></div>)
              : (<div style={{textAlign: 'right'}}><ChevronDown/></div>)
            }
            {selectItem}
          </div>
        </div>
        <div className="dropdown-list-style" style={{display: showMenu ? 'block' : 'none'}}>
          {
            dataStation.map((list, index) =>
              <div key={index} onClick={() => toggleSelected(list); props.setStation(list)}}>
                {list.name}
              </div>
            )
          }
        </div>
      </>
    )};

我尝试了

dataStation[0].name

但是不好，有人可以帮我吗？

Answer 1

您可以使用useEffect挂钩。当车站的获取请求完成并且道具更改时，它将从数组中选择第一个元素作为默认值。

useEffect(() => {
   if (Array.isArray(dataStation) && dataStation[0]) {
      selectItem(dataStation[0].name);
   }
}, [dataStation]);

在选择一个之前如何在选择中获得一个值？

1 个答案: