Javascript React hook-设置状态为'；更新状态

已解决

看起来就像是在react hook中，不管你在一个时间内调用了多少个setState 触发功能。只处理最后一个设置状态。因此 react忽略所有上述setState调用

在react类组件中并非如此

真是出乎意料的行为，我不知道 以前

---

比方说，我有两个对象类型为{name:'something'，data:123}的文件

我为每个文件渲染2个要选择的无线电输入

          type1   type2
file_1    radio   radio
file_2    radio   radio

我想要的是：

• 1文件不能同时为type1和type2
• 每种类型最多有1个文件， 意味着文件1和文件2不能同时为类型1（或类型2） 时间

简而言之，每行只能选择1，每列相同

我有两个问题：

如果我在收音机输入中使用onChange，一旦选择了收音机，就不能取消选择。在我改为onClick之后，这个问题就解决了

file_1（或file_2）可以同时是type1和type2，这不是我想要的

代码如下：

const files = [{name: 'file_1', data:1243}, {name: 'file_2', data: 2323}]
function App() {
  const [state, setState] = useState({type1: null, type2: null})

  const handleType1 = (obj) => () => {
    if ((state.type2 || {name: ''}).name === obj.name) {
      setState({...state, type2: null}) // <===================== this setState didn't update state
    }

    if((state.type1 || {name: ''}).name === obj.name) {
      setState({...state, type1: null})
    } else {
      setState({...state, type1: obj})
    }
  }

  const handleType2 = (obj) => () => {
    if ((state.type1 || { name: '' }).name === obj.name) {
      setState({...state, type1: null});  // <================== this setState didn't update state
    }

    if ((state.type2 || { name: '' }).name === obj.name) {
      setState({ ...state, type2: null });
    } else {
      setState({ ...state, type2: obj });
    }
  }
  return (
    <div className="App">
      <span>.......</span>
      <span> t1</span> 
      <span> t2</span>
      {
        files.map(file => {
        return (
          <div key={file.name}>
            <span>{file.name}</span>
            <input type='radio' checked={(state.type1 || { name: '' }).name === file.name} onClick={handleType1(file)}/>
            <input type='radio' checked={(state.type2 || { name: '' }).name === file.name} onClick={handleType2(file)}/>
          </div>)    
        })
      }    
    </div>
  );
}

const files=[{name:'file_1'，data:1243}，{name:'file_2'，data:2323}]
函数App（）{
const[state，setState]=useState（{type1:null，type2:null}）
常量handleType1=（obj）=>（）=>{
if（（state.type2 | |{name:'}）.name==obj.name）{
setState（{…state，type2:null}）//{
返回(
{file.name}
)    
})
}    
);
}

链接到

---

有什么想法，为什么它不能按预期工作？谢谢你的帮助。

我建议你先简化一下，如下所示：

当您现在单击单选按钮时，您将在控制台中看到它返回您想要的文件名和单选值，例如“file_uu1，type1”

---

我不确定这是否正是您所要求的，但它似乎更像是一个逻辑起点，而不是您在其中的所有状态代码？

选择后无法取消选择无线电输入，这不是一个反应，这是一个DOM规则。您可以将选择更改为另一个无线电选项，但不能通过单击它来取消选择。