使用onChange更新组件。React-Hooks

Question

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

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

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来更新dropdown，但是它没有使用useCallback来确保input在更新时不会过时。以下任一项：

1. 不要更新onChange中的dropdown，让useEffect回调来完成；或者
2. 使用e.target.value而不是input，并去掉更新dropdown的useEffect；或者
3. 不要对dropdown进行记忆(例如，不要将其置于状态)，因为您希望在输入发生更改时对其进行更新，只需直接在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>

​