Блог

я пытаюсь создать историю.нажмите на кнопку, нажмите

у меня есть эта строка поиска, в которой будут отображаться имена врачей при поиске {suggestion.firstname}

я пытаюсь передать {suggestion.id } как URL-адрес при клике на ли, соответствующий

при нажатии на li вызов не будет отправлен в finddoctor

  function finddoctor(e) {
    console.log(e);
    history.push(`/detiled/${e} `);
  }

 

  
  const onChange = (event) => {
    const value = event.target.value;
    setInputValue(value);
    setShowResults(false);

    

    const filteredSuggestions = suggestions.filter(
      (suggestion) =>
        suggestion.firstname
          .toString()
          .toLowerCase()
          .includes(value.toLowerCase()) ||
        suggestion.id.toString().toLowerCase().includes(value.toLowerCase())
    );

  

    setFilteredSuggestions(filteredSuggestions);
    setDisplaySuggestions(true);
  };

  const onSelectSuggestion = (index) => {
    setSelectedSuggestion(index);
    setInputValue(filteredSuggestions[index]);
    setFilteredSuggestions([]);
    setDisplaySuggestions(false);
  };

  const SuggestionsList = (props) => {
  const {
      suggestions,
      inputValue,

      onSelectSuggestion,
      displaySuggestions,
      selectedSuggestion,
    } = props;

    if (inputValue amp;amp; displaySuggestions) {
      if (suggestions.length > 0) {
        return (
          <ul className="suggestions-list" style={styles.ulstyle}>
            {suggestions.map((suggestion, index) => {
    
              const isSelected = selectedSuggestion === index;
              const classname = `suggestion ${isSelected ? "selected" : ""}`;
              return (
               
              
                  <li
                    style={styles.listyle}
                    onClick={()=> finddoctor(suggestion.id)}
                    key={index}
                    className={classname}
                  >
                    {suggestion.firstname}
                  </li>
              
              );
            })}
          </ul>
        );
      } else {
        return <div>No suggestions available...</div>;
      }
    }
    return <></>;
  };


  useEffect(() => {
    axios
      .get("admin-panel/all-doctors-list/")
      .then((res) => {
        const data = res.data;
      setShowSerch(data);

      });
  
  }, []);

  return (
    <>
      <div className="note-container" style={styles.card}>
        <div style={styles.inner}>
          <p style={{ textAlign: "left" }}>Search Doctors</p>
          <form className="search-form" style={{}}>
            {showResults ? (
              <FontAwesomeIcon
                style={{ marginRight: "-23px" }}
                icon={faSearch}
              />
            ) : null}
            <input
              onChange={onChange}
              value={inputValue}
              style={styles.input}
              type="Search"
            />

            <SuggestionsList
              inputValue={inputValue}
              selectedSuggestion={selectedSuggestion}
              onSelectSuggestion={onSelectSuggestion}
              displaySuggestions={displaySuggestions}
              suggestions={filteredSuggestions}
            />
          </form>
         
        </div>
      </div>
    </>
  );
};


 

Вы используете в своем проекте «react-router-dom»? В этом случае вы должны использовать объект истории определенным образом. Например, вы можете получить его с помощью крючка useHistory.

 import { useHistory } from "react-router-dom";

const SuggestionsList = ({
    suggestions,
    inputValue,
    displaySuggestions,
    selectedSuggestion,
}) => {
    let history = useHistory();

    const finddoctor = (e) => {
        console.log(e);
        history.push(`/detiled/${e} `)
    };

    if (inputValue amp;amp; displaySuggestions) {
        if (suggestions.length > 0) {
            return (
                <ul className="suggestions-list">
                    {suggestions.map((suggestion, index) => {
                        return (
                            <li
                                onClick={() => finddoctor(suggestion.id)}
                                key={index}
                            >
                                {suggestion.firstname}
                            </li>
                        )
                    })}
                </ul>
            )
        } else {
            return <div>No suggestions available...</div>
        }
    }
    return <></>
};