Question

输入中的名称与状态下的道具（反应钩）相同，因此我尝试这样做，但这没用：

setState({ ...state, hasChanged: true, [e.target.name]: e.target.value });

当我这样做时，它会起作用：

state[e.target.name] = e.target.value;

我知道这不是正确的方法，但是如何在setState中设置它呢？我知道我以前做过模拟游戏，但不记得我是怎么做的。

编辑：

感谢所有答案。

我找到了问题的一部分，状态也由另一个函数更新，因此该函数覆盖了我在此函数中尝试更新的内容。我现在想先解决这个问题...

Answer 1

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [formData, setFormData] = useState({ answer1: "" });

  const handleChange = ({ target: { name, value } }) => {
    setFormData({ ...formData, hasChanged: true, [name]: value });
  };

  console.log(formData);

  return (
    <div className="App">
      <input name="answer1" value={formData.answer1} onChange={handleChange} />
    </div>
  );
}

您需要在输入中使用名称prop才能使其正常工作

这是一支电笔，https://codesandbox.io/s/admiring-dream-qzzhi?file=/src/App.js对于您要执行的操作，我不太清楚，因为您没有提供太多上下文，但这似乎可以完成工作

Answer 2

我能告诉您的是，第一种方法使用新值创建一个新对象，第二种方法只是更改该对象。如果您要传递对象（状态），然后分配一个新对象，而不向上传播更改，则该对象的引用在调用上下文中保持不变，因此可能不会反映出更改，例如

function Component1(){
   const[state,setState] = useState({})
   return <Component2 state={state}></Component2>
}

function Component2(){
  const[state, setState] = useState(props.state)

  //this creats a new objects Comoponent1 wont "see the changes", state references 
  // a different object in Component1 and Component2
  setState({...state, changed: true}; 


  //this alters the object Component1 passed, Component1 and Component2 will keep 
  //the same reference
  state[changed] = true 
}

您的问题不是很具体，但这可能是问题的根源。

从e.target.name获取值并在react钩子setState中使用

2 个答案: