一个值在 React 中的原始值后面

Question

我正在尝试列出用户在输入框中键入的查询状态。我在这里面临的问题是值是原始值后面的 1。我相信这可能是因为我使用 useState 和 setQuery 方法形成的查询状态的异步行为正在更新查询（如果我的猜测错误，请纠正我）。

让我知道如何解决这个问题。

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>

工作代码沙盒链接 - https://codesandbox.io/s/tender-mountain-qzgxf

另外，我需要有关在堆栈中设置反应代码的帮助 sn-ps。我在这里添加但它不起作用让我知道我在做什么 错误的。提前致谢。 :)

Answer 1

我认为 queryList 应该在这里作为状态进行管理。

SO Snippet 中的工作代码

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>

好消息

我已经在堆栈 sn-ps here in MSO post 中制作了一个 create-react-app 模板

随时编辑和改进它???

Answer 2

您总是在事件发生时推送当前状态，而不是推送事件的value：

const handleChange = (e) => {
  const newQuery = e.target.value;
  queryList.push(newQuery);
  setQuery(newQuery);
};