React hook - setState не обновил состояние

Question

Решено

Похоже, что в реагирующем хуке, независимо от того, сколько setState вы вызываете в запущенной функции. Только последний setState будет обработан. Таким образом, реакция игнорирует все вышеперечисленные вызовы setState.

Это не относится к компоненту класса реакции.

Действительно неожиданное поведение ловушки реакции, которого я не знал раньше.

---

Допустим, у меня есть 2 файла с таким типом объекта {имя: 'что-то', данные: 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

Есть идеи, почему это не сработало как задумано? Спасибо за любую помощь.

Answer 1

Могу ли я предложить вам сначала упростить это, как показано ниже: https://codesandbox.io/s/elastic-sun-n7q0l?fontsize=14

Когда вы нажимаете переключатели, вы увидите в консоли, что она возвращает имя файла и значение, которое выхочу по радио, например. "file__1, type1"

Я не уверен, что это именно то, что вы просите, но это скорее логическая отправная точка, нежели весь код состояния, который у вас там был?