Question

我正在尝试将当前值与在文本框中输入的先前值进行比较。但是变量没有存储值。

声明变量currentVal以存储初始值，并通过currentVal更改onChange值以存储最新值，但不存储该值。

我不确定为什么会发生这种情况，将currentVal移动到函数Input上方时，它会存储值，并且一切正常。但是我需要将Input argument存储为初始值。

以下是codesandbox中的代码

const Input = ({ initialValue = "20" }) => {
  const [value, updateValue] = useState(initialValue);

  var currentVal = initialValue;
  const update = event => {
    console.log("currentVal at Step : 1 ::", currentVal);
    var x = event.target.value;
    if (currentVal !== x) {
      currentVal = x;
      console.log("Inside Loop :: currentVal at Step : 2 ::", currentVal);
      updateValue(currentVal);
    } else {
      updateValue(currentVal);
    }
  };
  return (
    <>
      Data :: {value} <br />
      <br />
      <input type="text" value={value} onChange={e => update(e)} />
    </>
  );
};

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1> Data Test ! </h1>
        <Input />
      </div>
    );
  }
}

问题：

为什么currentVal不保存/存储更新后的值？

Answer 1

  var currentVal = value || initialValue;

不确定我是否正确理解了您的问题，但是假设您只想使用初始值（如果存在），然后继续使用更改后的值，我想这就是您想要做的事情？

请注意，最初的帖子后来因后续问题而被更改。答案在下面的评论中，不过我也将其放在此处以方便参考。

这是因为考虑到每次更改都会重新渲染组件，就像在每个渲染器上被调用的函数一样，只声明它记得是通过使用钩子上的updateValue（）更新状态方法。其他所有只是函数上的变量，该变量会被重置/ 在每个渲染器上重新初始化

Answer 2

我对useState（）方法一无所知，所以我已经注释了这一行。文本输入值未更新，因为从currentVal更新值后，输入返回方法未呈现，因此我在父组件的输入组件中传递了updateValue（）方法，其更新状态随后通过更新将组件从父组件呈现给子组件值。

$this->getContainer()->get('test_phpdocxService');

Answer 3

Component Input的initialValue值为20，该值分配给currentVal，输入标签中的值分配给update函数内部的currentVal，然后updateValue再次调用，再次将currentVal分配为initialValue 20，这就是为什么不更新currentVal的原因，

import React, { useState, Component, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

var state = {
  currentVal: 0
};

const Input = () => {
  const [value, updateValue] = useState(20);
  const update = event => {
    var x = event.target.value;
    if (value !== x) {
      updateValue(x);
      state.currentVal = x;
    } else {
      updateValue(value);
      state.currentVal = value;
    }
  };
  return (
    <div>
      Data :: {value} || CurrentVal :: {state.currentVal} <br />
      <br />
      <input type="text" value={value} onChange={e => update(e)} />
    </div>
  );
};

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1> Data Test ! </h1>
        <Input />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Javascript变量未在ReactJS组件中存储值

3 个答案: