React.js中useState多输入框仅一个状态更新问题求助

你的代码里四个状态其实都在正常更新，问题出在状态的展示部分：

<p>标签里的{a, b, c, d}使用了JavaScript的逗号运算符，这个运算符会依次计算所有表达式，但最终只返回最后一个表达式的值（也就是d）。所以不管a、b、c怎么变化，页面上只会显示d的内容，导致你误以为只有d的状态在工作。

修复方法 #

只要把状态的展示方式改成能同时输出所有值的形式即可，比如：

1. 直接拼接显示：

   <p style={{color:'white'}}>
     {a} {b} {c} {d}
   </p>
   

2. 使用模板字符串：

   <p style={{color:'white'}}>{`${a} | ${b} | ${c} | ${d}`}</p>
   

3. 每个状态单独渲染：

   <p style={{color:'white'}}>{a}</p>
   <p style={{color:'white'}}>{b}</p>
   <p style={{color:'white'}}>{c}</p>
   <p style={{color:'white'}}>{d}</p>
   

额外优化建议 #

建议给每个输入框加上value属性绑定对应状态，将其转为受控组件，这样输入框的显示值和React状态会完全同步，避免潜在的不一致问题：

<input value={a} onChange={(e) => setA(e.target.value)} />
<input value={b} onChange={(e) => setB(e.target.value)} />
<input value={c} onChange={(e) => setC(e.target.value)} />
<input value={d} onChange={(e) => setD(e.target.value)} />

完整修复后的代码 #

import React, { useState } from "react";

export default function Home() {
  const [a, setA] = useState('')
  const [b, setB] = useState('')
  const [c, setC] = useState('')
  const [d, setD] = useState('')
  
  return (
    <>
      <input value={a} onChange={(e) => setA(e.target.value)} />
      <input value={b} onChange={(e) => setB(e.target.value)} />
      <input value={c} onChange={(e) => setC(e.target.value)} />
      <input value={d} onChange={(e) => setD(e.target.value)} />
      <p style={{color:'white'}}>
        {a} {b} {c} {d}
      </p>
    </>
  );
}

内容的提问来源于stack exchange，提问作者Grimm XIII