反应组件状态只改变一次

Question

我有两个组件 <App /> 和 <CompA/>

我要完成的任务是，

我在 <App/> 中有一个 state 和一个 input 字段 <CompA/> 我想更改通过更改 <CompA/>

中的输入的 <App/> 状态

App.js


export default function App() {
  const [containers, setContainers] = useState({
    invoiceData: null,
    containers: [
      { id: "09d4ba8a-30f1-4bf5-8b9f-ca45c497039a", containerNum: "" }
    ]
  });

  const changeContainerNum = (e, index) => {
    let current = containers;
    current.containers[index].containerNum = e.target.value;

    // current variable change on every function call
    console.log("local variable", current);
    setContainers(current);
  };
  // but state only change once
  console.log("////state", containers);

  return (
    <div>
      {containers.containers.map((container, index) => (
        <CompA
          key={container.id}
          index={index}
          changeContainerNum={changeContainerNum}
        />
      ))}
    </div>
  );
}

CompA.js



function CompA({ changeContainerNum, index }) {
  const [containerNumber, setContainerNumber] = useState("");

  return (
    <div>
      <input
        placeholder="Container Number..."
        value={containerNumber}
        onChange={(e) => {
          changeContainerNum(e, index);
          setContainerNumber(e.target.value.toUpperCase());
        }}
      />
    </div>
  );
}

export default CompA;

我想改变 containerNum 属性的 containers 状态，

问题是

当 onChange 事件被触发时 changeContainerNum(e, index) 代码在这个函数中工作正常但是当我将新的更改值分配给状态时它只更新状态一次

onChange={(e) => {
          // 
          changeContainerNum(e, index);
          setContainerNumber(e.target.value.toUpperCase());

        }}

如何在每个 onChange 事件上更新状态。 更新一下会有帮助code here

Answer 1

你不应该改变状态变量，你必须创建一个新的引用：

const changeContainerNum = (e, index) => {
  const containerNum = e.target.value;

  setContainers(({invoiceData, containers})=> ({
    invoiceData,
    containers: containers.map((container, idx) => 
      idx === index ? {...container, containerNum} : container
    )
  }));
};

反应组件状态只改变一次

react component state changed only once

reactjs

react-hooks