如何从选择中调度一个动作

Question

我想更新一个状态，然后在同一个 onChange 中用该状态调度一个动作。我需要在选择选择选项后发生这种情况。

目前 onChange 仅在页面加载时触发。我希望选择能够在选择选项时获取数据，然后在其下方呈现一个新的选择，并将获取的数据作为可供选择的选项

我正在使用 Mern 堆栈

下面是我的代码

import React, { useState, useEffect } from 'react';
import { Card, CardBody, CustomInput, Button, Input, Label, Form } from 'reactstrap';
import { useDispatch, useSelector } from 'react-redux';
import { useForm } from 'react-hook-form';
import Select from 'react-select';
import FalconCardHeader from '../common/FalconCardHeader';
import CustomCardSummary from '../common/CustomCardSummary';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Link } from 'react-router-dom';
import { findANumber } from '../../actions/index';
import numbers from '../../data/billing/area-codes';



const BuyNewNumbers = () => {
  const auth = useSelector((state) => state.auth)
  const dispatch = useDispatch()
  const [country, setCountry] = useState('US');
  const [areaCode, setAreaCode] = useState('');
  const [numberType, setNumberType] = useState('')
  const { register, handleSubmit, errors, watch } = useForm();


 useEffect(() => {
   
 }, [])


  return (

    <Card className="h-100">
      <FalconCardHeader className="text-center"title="Buy a new number" light={false} />
      <CardBody tag={Form} className="bg-light" onSubmit={e => e.preventDefault()}>
      <CustomCardSummary color="success"className="d-flex justify-content-between">
          <span className="fs-1">Choose your Country</span>
          <div className="mb-2"></div>
        <CustomInput
          type="select"
          id="country"
          name="country"
          className="mb-3"
          value={country}
          onChange={({ target }) => setCountry(target.value)}
        >
          <option value="US">United States</option>
          <option value="CA">Canada</option>
          
        </CustomInput>
        {console.log(country)}
        <span className="fs-1">Choose Number Type</span>
        <div className="mb-2"></div>

        <CustomInput
          type="select"
          id="numberType"
          name="numberType"
          className="mb-3"
          value={country}
          onChange={({ target }) => setNumberType(target.value)} // dispatch an action and map over array of available area codes from twilio
          > 
            
            <option value="local">Local</option>
            <option value="Toll fre">Toll free</option>

          </CustomInput>
        </CustomCardSummary>
        <span className="fs-1">Area Code</span>
          <div className="mb-2"></div>
         

        <Select 
          name="areacodes"
          isSearchable
          options={numbers}
          styles={customStyles}
          onChange={ 
            setAreaCode,
            console.log(areaCode)
          
          }

          />
        <hr />
        {console.log(areaCode)}
        <h5 className="d-flex justify-content-between">
          <span>Price per month</span>
          <span>$4.00</span>
        </h5>
        <p className="fs--1 text-600">
        We will deduct this amount from your account balance each month. If your account balance becomes too low to renew the dedicated number, 
        we leave right to cancel it permanently. You can cancel this number at any time.
        </p>
        <div className="align-items-right">
        <Button className="mx-2"type="submit" color="danger">Cancel</Button>
        <Button type="submit" color="primary">
          <FontAwesomeIcon icon="plus" className="mr-2" />
          Activate number
        </Button>
        </div>
       
      </CardBody>
    </Card>
  );
  };


export default BuyNewNumbers;

Answer 1

只需像这样拨打dispatch：

onChange={({ target }) => {
  setNumberType(target.value)}
  dispatch(...)
  // another logic
}