javascript - 使用 onChange 更新组件。 React-Hooks

Question

我正在构建一个下拉列表，其中包含从 API 获取数据的建议。搜索栏的输入是使用 setState 存储的，当我更改文本输入中的值时，它会更新。

问题是，每次在文本输入中输入新字符时，我都无法从下拉列表中更新用户列表。我可以以某种方式强制每次 props 改变时渲染组件吗？或者有更好的方法吗？

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;

Answer 1

我无法在简单的测试中使用您的代码来解决问题，但是您的 onChange 确实有问题:它使用 input 来更新下拉列表，但是它没有使用 useCallback 来确保 input 在发生时不会过时。要么:

1. 不要更新 onChange 中的下拉列表，允许 useEffect 回调来执行此操作；或

2. 使用e.target.value代替input并摆脱更新下拉列表的useEffect；或

3. 不要记住下拉菜单(例如，不要将其置于状态中)，因为无论如何您都想在输入更改时更新它，只需直接在 JSX 中渲染它

根据您所展示的内容，#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>
    );
}

实例:

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>