#javascript #reactjs
Вопрос:
Я пытаюсь войти в историю, нажимая на кнопку «Нажать».
функция onclick li не работает
как вы можете видеть в коде <SuggestionsList/> , в последнем операторе возврата отображаются его функции const SuggestionsList = (props) => { . Функция onclick находится внутри const SuggestionsList функции, это делает функцию onclick нерабочей
const history = useHistory();
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>
</>
);
};
Комментарии:
1. Учитывая
useHistory, что это крючок, он (и впоследствииfinddoctor) должен находиться в пределах вашего функционального компонента2. codesandbox.io/s/dreamy-ritchie-x2tcr?file=/src/App.js
3. я создал эту песочницу, и это ужасно, но это не вписывается в мой проект
4. Наряду с тем, что упоминает Фил, использование компонента
historyдолжно быть отображено внутриRouterкомпонента. Код в вашей связанной песочнице, похоже, не запускается и не воспроизводит вашу проблему; вы так много прокомментировали, что он отображает только горизонтальную линию. Я не уверен, что мы можем сделать с ним в его нынешнем состоянии.5. Хорошо, я вижу, что строка-это ввод текста. Я не знаю, что воспроизводит ваша песочница и что, по вашим словам, там работает. Как я уже упоминал ранее, вы прокомментировали много кода, в частности
history.push(`/detiled/${e}`);, код, который вы упомянули, например, не работает. Это не наша работа-отлаживать/переводить вашу безопасную среду в работающее/воспроизводимое состояние. Если вы откомментировалиhistory.pushстроку, чего вы ожидаете? Что именно не работает?
Ответ №1:
Из того, что я вижу, вы просто забыли предоставить контекст маршрутизации для своего приложения. При раскомментировании history.push(`/detiled/${e}`); строки Searchclients и попытке поиска/навигации я вижу следующую ошибку:
TypeError Cannot read properties of undefined (reading 'push')
Если предположить, что это та же ошибка, что и у вас, то решение простое: оберните приложение в Router компонент, чтобы обеспечить контекст маршрутизации.
Пример:
App.js
const finddoctor = (e) => {
console.log(e);
history.push(`/detiled/${e}`);
};
index.js:
import { BrowserRouter as Router } from "react-router-dom";
const rootElement = document.getElementById("root");
ReactDOM.render(
<StrictMode>
<Router>
<App />
</Router>
</StrictMode>,
rootElement
);
