Javascript 使用onChange更新组件。反应钩

我正在构建一个下拉列表，其中包含从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;

import React，{useState，useffect}来自“React”；
从“../Dropdown/Dropdown”导入下拉列表；
导入“/SearchBar.css”；
//使用钩子使用箭头函数创建的组件
常量搜索栏=（道具）=>{
const[input，setInput]=useState（“”）；
常量[dropdownComponent，updateDropdown]=useState（）
useEffect（（）=>{updateDropdown（）}，[input]）
const onChange=（e）=>{
设置输入（如currentTarget.value）
updateDropdown（）
console.log（“”）
}
返回(
{dropdownComponent}
)
}
导出默认搜索栏；

我无法在一个简单的测试中使用您的代码来解决问题，但是您的

onChange

确实存在一个问题：它使用

input

来更新下拉列表，但它没有使用

useCallback

来确保

input

在更新时不会过时。或者：

不要更新

onChange

中的下拉列表，允许

useffect

回调进行更新；或者

使用

e.target.value

而不是

input

，并删除

useffect

更新下拉列表；或

不要记忆下拉列表（例如，不要将其置于状态），因为您希望在输入发生更改时对其进行更新，只需在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 SearchBar=（道具）=>{
const[input，setInput]=useState（“”）；
const onChange=（e）=>{
设置输入（如当前目标值）；
};
返回(
);
}

实例：

const{useState，useffect}=React；
函数下拉列表（{input}）{
返回“{input}”的下拉列表；
}
常量搜索栏=（道具）=>{
const[input，setInput]=useState（“”）；
const onChange=（e）=>{
设置输入（如当前目标值）；
};
返回(
);
}
ReactDOM.render（，document.getElementById（“根”）；

如果您使用堆栈片段（

[]

工具栏按钮）包含一个可运行的，它将帮助我们帮助您.Stack Snippets支持React，包括钩子和JSX；*包括钩子--您必须更新React的版本，UI中的下拉列表已经有一段时间没有更新了。只需选择最新版本，然后在两个脚本标记中将16.6.3更改为16.10.2。感谢您的帮助。我以前已经实现了选项3。出于某种原因，它不会更新更新，可能是因为子组件是如何构建的。我将尝试发布一个可运行的示例。@FelipeSouza-如果您需要帮助，请告诉我。您可以从cdnjs.com获得大多数内容。您通常需要“UMD”最后我发现了问题。负责获取数据的组件只在componentDidMount上调用API，而不是在componentDidUpdate上调用API。我对其进行了更改，问题得到了解决。之后，我将代码转换为与其他代码一样使用挂钩。非常感谢您的帮助。另外，我不知道Live Exa我以后肯定会用这个。