Блог

Я пытался заставить его работать с селектором стран и регионов, но когда дело доходит до выбора региона, он не отвечает, вместо этого он перенаправляется на выбор страны снова и снова. Любые решения были бы отличными

 import React, { useEffect, useState } from 'react';
import { useSelector } from "react-redux";
import Register from "../register/Register";
import "./people.scss";

import { AiFillHeart, AiFillWechat } from 'react-icons/ai';
import { CountryDropdown, RegionDropdown } from 'react-country-region-selector';

function People() {
  const data = useSelector((state) => state.authReducer.data);
  const [users, setUsers] = useState();

  // fetching users from DB
  useEffect(() => {
    fetch("http://localhost:5000/users")
      .then((response) => response.json())
      .then((users) => setUsers(users));
  }, []);

  // Countries selector
  const initialState = {
    country: '',
    region: ''
  }

  const [state, setState] = useState(initialState);
  const { country, region } = state;

  // Age selector
  const populateOptions = () => {
    const optionsNumbers = [];
    for (let i = 18; i <= 100; i  ) {
      optionsNumbers.push(<option key={i} value={i}>{i}</option>)
    }
    return optionsNumbers;
  }

  // state loggedIn
  if (data.token amp;amp; data.user._id) {
    return (
      <section className="people">
        <div className="filter-search-bar">
          <div>
            <span>Seeking: </span>
            <select id="select">
              <option id="male" value="male">male</option>
              <option id="female" value="female">female</option>
              <option id="all" value="all">any</option>
            </select>
          </div>
          <div>
            <span>Country: </span>
            <CountryDropdown
              value={country}
              onChange={(val) => setState({ country: val })} />
            <RegionDropdown
              country={country}
              value={region}
              onChange={(val) => setState({ region: val })} />
          </div>
          <div className="age-slider">
            <span>Age: </span>
            <select defaultValue="18" id="min-age">
              {populateOptions()}
            </select>
            <select defaultValue="40" id="max-age">
              {populateOptions()}
            </select>
          </div>
          <div>
            <button type="submit"> Search Filter </button>
          </div>
        </div>
        {users amp;amp;
          users.map((user, i) => (
            <div key={i} className="profile-card">
              <div className="image-container">
                <img className="profile-image" src={user.image} alt="profile_pic" />
              </div>

              <div className="card-body">
                <div className="bio-container">
                  <h3 className="card-title">{user.firstName} {user.lastName}</h3>
                  <p className="profile-text">{user.bio}</p>
                </div>

                <div className="card-icons-container">
                  <AiFillHeart color={"divghtpink"} size={25} />
                  <AiFillWechat color={"divghtpink"} size={25} />
                </div>
              </div>
            </div>
          ))}
      </section>
    );
  } else {
    return <Register />;
  }
}




export default People;

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    import React, { useEffect, useState } from 'react';
    import { useSelector } from "react-redux";

    import Register from "../register/Register";
    import "./people.scss";

    import { AiFillHeart, AiFillWechat } from 'react-icons/ai';
    import { CountryDropdown, RegionDropdown } from 'react-country-region-selector';

    function People() {
      const data = useSelector((state) => state.authReducer.data);
      const [users, setUsers] = useState();

      // fetching users from DB
      useEffect(() => {
        fetch("http://localhost:5000/users")
          .then((response) => response.json())
          .then((users) => setUsers(users));
      }, []);

      // Countries selector
      const initialState = {
        country: '',
        region: ''
      }

      const [state, setState] = useState(initialState);
      const { country, region } = state;

      // Age selector
      const populateOptions = () => {
        const optionsNumbers = [];
        for (let i = 18; i <= 100; i  ) {
          optionsNumbers.push(<option key={i} value={i}>{i}</option>)
        }
        return optionsNumbers;
      }

      // state loggedIn
      if (data.token amp;amp; data.user._id) {
        return (
          <section className="people">
            <div className="filter-search-bar">
              <div>
                <span>Seeking: </span>
                <select id="select">
                  <option id="male" value="male">male</option>
                  <option id="female" value="female">female</option>
                  <option id="all" value="all">any</option>
                </select>
              </div>
              <div>
                <span>Country: </span>
                <CountryDropdown
                  value={country}
                  onChange={(val) => setState({ country: val })} />
                <RegionDropdown
                  country={country}
                  value={region}
                  onChange={(val) => setState({ region: val })} />
              </div>
              <div className="age-slider">
                <span>Age: </span>
                <select defaultValue="18" id="min-age">
                  {populateOptions()}
                </select>
                <select defaultValue="40" id="max-age">
                  {populateOptions()}
                </select>
              </div>
              <div>
                <button type="submit"> Search Filter </button>
              </div>
            </div>
            {users amp;amp;
              users.map((user, i) => (
                <div key={i} className="profile-card">
                  <div className="image-container">
                    <img className="profile-image" src={user.image} alt="profile_pic" />
                  </div>

                  <div className="card-body">
                    <div className="bio-container">
                      <h3 className="card-title">{user.firstName} {user.lastName}</h3>
                      <p className="profile-text">{user.bio}</p>
                    </div>

                    <div className="card-icons-container">
                      <AiFillHeart color={"divghtpink"} size={25} />
                      <AiFillWechat color={"divghtpink"} size={25} />
                    </div>
                  </div>
                </div>
              ))}
          </section>
        );
      } else {
        return <Register />;
      }
    }


    export default People;
 

Я попытался заставить его работать с селектором стран и регионов, но когда дело
доходит до выбора региона, он не отвечает, вместо этого
он снова перенаправляется на выбор страны. Любые решения были бы
замечательными

Ваша ошибка, скорее всего, заключается в том, что вы путаете способ обновления состояния, созданного с помощью крючков, с тем, как вы обновляете его в компонентах класса.

Если у вас есть это

  const [state, setState] = useState({
    country: '',
    region: ''
  }
 

Чтобы обновить регион, вы бы этого не делали:

 setState({region: 'new region'});
 

но это

 setState({...state, region: 'new region' })
 

таким образом, сохраняя остальную часть штата в целости и сохранности.