时间戳

首页 > 解决方案 > React - 功能组件不返回更新的变量值

javascript - React - 功能组件不返回更新的变量值

问题描述

我有一个类 Component FooPage，它呈现一个导入的功能性组件 BarForm。我将 handleSubmit 作为道具传递给 BarForm 并希望捕获 inputData 值。问题是该值作为初始值返回。

帮助调试：在我提交之前，正确记录了inputData的最新值，并且提交没有触发重新渲染。尽管如此， FooPage 控制台仍会记录“初始值”。更重要的是，将 onSubmit 回调从更改handleSubmit(inputData)为箭头函数可以(event) => handleSubmit(inputData)(event)解决问题。

虽然我知道我可以通过 实现这一点useState，但我想了解为什么即使没有重新渲染，更新后的 inputData 也会作为初始值返回，以及为什么使用箭头函数作为回调解决了这个问题。

const BarForm = ({ handleSubmit }) => {
  let inputData = "initial value"
  console.log("I just re-rendered.") //Check BarForm did not re-render when submit.
  return (
    <form onSubmit={ handleSubmit(inputData) }> {/* won't work, but arrow function does */}
      <input
        onChange = {(event) => {
          inputData = event.target.value; //update inputData
          console.log(inputData); //confirm the value of inputData before submit
        }}
        />
      <button type="submit">Submit</button> {/* But */}
    </form>
  )
}

class FooPage extends React.Component {
  handleSubmit = (inputData) => (event) => {
    event.preventDefault(); //Don't re-render
    console.log(inputData); //See the output 
  }

  render() {
    return (
      <BarForm handleSubmit = {this.handleSubmit} />
    )
  }
}

ReactDOM.render(<FooPage />, document.getElementById("app"));
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

<div id="app"></div>

标签： javascriptreactjs

解决方案

当您设置<form onSubmit={ handleSubmit(inputData) }>时，在这种情况下您实际上在做的是调用handleSubmitfromFooPage函数，该函数返回一个新函数，该函数inputData在组件首次作为函数范围的一部分呈现时捕获。

当你用箭头函数调用它时，你实际上并没有在组件渲染时创建一个新函数。您创建函数onSubmit。

推荐阅读