已解决

  

无论您在一个函式中调用了多少setState，似乎都像在react钩子中一样   触发功能。仅最后一个setState将被处理。从而   反应忽略了以上所有setState调用。

     

React类组件不是这种情况。

     

我不知道的真正意外的反应挂钩行为   以前。

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

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

          type1   type2
file_1    radio   radio
file_2    radio   radio

我想要的是

• 1个文件不能同时是type1和type2。
• 每种类型最多包含1个文件， 表示file_1和file_2不能同时是type1（或type2） 时间。

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

我遇到2个问题：

1. 如果我在单选输入中使用onChange，则一旦选择单选，就无法取消选择它。在我改用onClick并解决了问题之后。
2. 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>
  );
}

链接到codesandbox

任何想法，为什么它没有按预期运行？感谢您的帮助。