Question

已解决

无论您在一个函式中调用了多少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个问题：

如果我在单选输入中使用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>
  );
}

链接到codesandbox

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

Answer 1

我是否可以建议您首先将其简化如下：https://codesandbox.io/s/elastic-sun-n7q0l?fontsize=14

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

我不确定这是否正是您要的内容，但似乎更像是一个逻辑起点，而不是那里的所有状态代码？

反应挂钩-setState没有更新状态

1 个答案: