我试图列出用户在输入框中键入的查询状态。 我在这里面临的问题是，值在原始值的后面是1。 我相信这可能是因为我使用useSteat和setQuery方法形成的查询状态的异步行为，该方法正在更新查询（如果我的猜测有误，请更正）。
请告诉我如何解决此问题。
null
let queryList = [];
function App() {
const [query, setQuery] = React.useState("");
const handleChange = e => {
setQuery(e.target.value);
queryList.push(query);
console.log(query);
};
return (
<div className="App">
<h1>Hello React</h1>
<input type="text" value={query} onChange={handleChange} />
<div className="query">
{queryList.map((x, id) => (
<li key={id}>{x}</li>
))}
</div>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<App />
rootElement
);<script src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>null
工作代码与框链接-https://CodeSandbox.io/s/tender-mountain-qzgxf
另外，我需要一个关于在堆栈片段中设置react代码的帮助。 我在这里加了一句，但它不起作用，让我知道我做错了什么。 提前谢谢你。 :）
我认为queryList在这里应该被管理为state。
null
function App() {
const [query, setQuery] = React.useState("");
const [queryList, setQueryList] = React.useState([]);
const handleChange = (e) => {
setQuery(e.target.value);
setQueryList([...queryList, e.target.value]);
};
return (
<div className="App">
<h1>Hello React</h1>
<input type="text" value={query} onChange={handleChange} />
<div className="query">
{queryList.map((x, id) => (
<li key={id}>{x}</li>
))}
</div>
</div>
);
}
class Root extends React.Component {
render() {
return (
<App/>
);
}
}
ReactDOM.render(<Root />, document.getElementById('root'));<script src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>
您总是在事件发生时推送当前状态，而不是推送事件的值:
const handleChange = (e) => {
const newQuery = e.target.value;
queryList.push(newQuery);
setQuery(newQuery);
};
