[英]Update a component with onChange. React-Hooks
I'm building a dropdown with suggestions that fetch data from an API.我正在构建一个下拉列表,其中包含从 API 获取数据的建议。 The input from the search bar is being stored using setState and it is updated when i change the value in the text input.来自搜索栏的输入是使用 setState 存储的,当我更改文本输入中的值时,它会更新。
The thing is that I'm not managing to update the users lists from the dropdown each time I enter a new character in the text input.问题是每次我在文本输入中输入新字符时,我都无法从下拉列表中更新用户列表。 Can I somehow force the component to be rendered every time the props change?我可以以某种方式强制每次道具更改时渲染组件吗? Or is there a better approach?或者有更好的方法吗?
import React, {useState, useEffect} from 'react';
import Dropdown from '../Dropdown/Dropdown';
import './SearchBar.css';
// Component created with arrow function making use of hooks
const SearchBar = (props) => {
const [input, setInput] = useState('');
const [dropdownComponent, updateDropdown] = useState(<Dropdown input={input}/>)
useEffect(() => {updateDropdown(<Dropdown input={input}/>)}, [input])
const onChange = (e) => {
setInput(e.currentTarget.value)
updateDropdown(<Dropdown input={input}/>)
console.log("=(")
}
return(
<div className="search-bar">
<input type="text" placeholder={props.placeholder} onChange={onChange}/>
{dropdownComponent}
</div>
)
}
export default SearchBar;
I can't make the problem happen using your code in a simple test, but your onChange
does has a problem: It's using input
to update the dropdown, but it's not using useCallback
to ensure that input
isn't stale when it does.我无法在简单的测试中使用您的代码来解决问题,但是您的onChange
确实存在问题:它使用input
来更新下拉列表,但它没有使用useCallback
来确保input
在它发生时不会过时。 Either:任何一个:
Don't update the dropdown in your onChange
, allowing your useEffect
callback to do it;不要更新onChange
的下拉菜单,让useEffect
回调来做; or或者
Use e.target.value
instead of input
and get rid of the useEffect
updating the dropdown;使用e.target.value
代替input
并去掉useEffect
更新下拉菜单; or或者
Don't memoize the dropdown (eg, don't put it in state) since you want to update it when the input changes anyway, just render it directly in the JSX不要记住下拉列表(例如,不要将其置于状态),因为无论如何您都想在输入更改时更新它,只需直接在 JSX 中呈现它
Of those, with what you've shown, #3 is probably the simplest:其中,根据您所展示的内容,#3 可能是最简单的:
const SearchBar = (props) => {
const [input, setInput] = useState('');
const onChange = (e) => {
setInput(e.currentTarget.value);
};
return(
<div className="search-bar">
<input type="text" placeholder={props.placeholder} onChange={onChange}/>
<Dropdown input={input}/>
</div>
);
}
Live Example:现场示例:
const {useState, useEffect} = React; function Dropdown({input}) { return <div>Dropdown for "{input}"</div>; } const SearchBar = (props) => { const [input, setInput] = useState(''); const onChange = (e) => { setInput(e.currentTarget.value); }; return( <div className="search-bar"> <input type="text" placeholder={props.placeholder} onChange={onChange}/> <Dropdown input={input}/> </div> ); } ReactDOM.render(<SearchBar />, document.getElementById("root"));
<div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.