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更新下拉列表，但没有使用{{1 }}，以确保useCallback不会过时。要么：

不更新input中的下拉列表，允许您的onChange回调函数执行此操作；或
使用useEffect代替e.target.value，并摆脱input更新下拉列表；或
不要记住下拉列表（例如，不要将其置于状态），因为无论何时输入更改，您都希望对其进行更新，只需将其直接呈现在JSX中

根据您的显示，其中＃3可能是最简单的：

useEffect

实时示例：

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"));

使用onChange更新组件。反应钩

1 个答案: