setState 不会改变/重新渲染

Question

我使用给定的 JS、React 和 CoreUI4 React 技术栈开发应用程序的前端原型。 我来自 Python 背景，在 Web 开发和给定的技术堆栈方面没有太多经验。当我不得不开始使用钩子时，这一点变得很明显。

问题

我真的不明白为什么它不更新我的usestate 和/或不渲染。我需要一个条件渲染，我也使用setState。

我尝试过：

• 从我的主应用程序传递一个更大的状态，一旦我开始条件逻辑（挂钩规则）就不起作用
• 实现 useEffect 在这里和其他变体中，没有改变任何东西。
• 还有很多其他我不记得也没有用的东西。

当我单击其中一个按钮时，控制台会为我提供以下信息：

test1.js:21 useEffect //3 times from first render
test1.js:33 clicked (3) ['Some other Stuff available', '', 'cbutton']
test1.js:34 _testSubL  (3) ['Some other Stuff available', '', 'cbutton']
test1.js:46 tmpState:  (3) ['Some other Stuff available', 'pass', 'cbutton']
test1.js:47 btUS:  (3) ['Some other Stuff available', '', 'cbutton']
test1.js:21 useEffect

在第二次及以下点击时：

test1.js:33 clicked (3) ['Some other Stuff available', 'pass', 'cbutton']
test1.js:34 _testSubL  (3) ['Some other Stuff available', '', 'cbutton']
test1.js:46 tmpState:  (3) ['Some other Stuff available', 'pass', 'cbutton']
test1.js:47 btUS:  (3) ['Some other Stuff available', 'pass', 'cbutton']
test1.js:21 useEffect

我创建了一个较小的测试版本，其中所有内容都在一个文件中，并且不导入数据或任何其他自定义函数。

import React, { lazy, useState, useEffect } from 'react'

import { CButton, CCol, CRow, CContainer } from '@coreui/react'

var tmpState = []
var inp1 = {
  id: 2,
  TestPhase: 'TestPhase',
  results: [
    [['File Input', 'some Doc', 'file']],
    [['Some Stuff available', 'pass', 'cbutton']],
    [['Some other Stuff available', '', 'cbutton']],
  ],
}.results

const ChangeButton = (_testSubL) => {
  const [btUS, setbtUS] = useState(_testSubL)

  useEffect(() => {
    console.log('useEffect')
  }, [btUS])

  //console.log('begin from: ', _testSubL)
  return (
    <>
      <CButton
        className="mx-1"
        color="secondary"
        shape="rounded"
        size="sm"
        onClick={() => {
          console.log('clicked', btUS)
          console.log('_testSubL ', _testSubL)
          tmpState = btUS
          if (_testSubL[2] == 'cbutton' && _testSubL[1] == 'pass') {
            tmpState = [_testSubL[0], 'fail', _testSubL[2]]
          } else if (_testSubL[2] == 'cbutton' && _testSubL[1] == 'fail') {
            tmpState = [_testSubL[0], 'pass', _testSubL[2]]
          } else if (_testSubL[2] == 'cbutton' && _testSubL[1] == '') {
            tmpState = [_testSubL[0], 'pass', _testSubL[2]]
          } else {
            //pass
          }
          setbtUS(tmpState)
          console.log('tmpState: ', tmpState)
          console.log('btUS: ', btUS)
        }}
      >
        Change
      </CButton>
    </>
  )
}

const TestMain = () => {
  return (
    <>
      <CContainer>
        <h3>Just some Test Page</h3>
        {inp1.map((_subl) => (
          <CRow className="justify-content-center pt-1" key={_subl[0][0]}>
            <CCol md="2">Some Icon: {_subl[0][1]}</CCol>
            <CCol md="3">{_subl[0][0]}</CCol>
            <CCol md="3">{ChangeButton(_subl[0])}</CCol>
          </CRow>
        ))}
      </CContainer>
    </>
  )
}

export default TestMain

感谢阅读，我希望这是可以理解的，因为这是我的第一篇文章

Answer 1

您可以在该特定状态变量的 useeffect 挂钩中获取更新的值，因为它不会立即更新自身。并在获得新价值后将您的逻辑放在这里。

  useEffect(() => {
    console.log('useEffect btUS', btUS)
  }, [btUS])

Answer 2

如果你需要查看更新状态的console.log，你可以让你的回调异步等待console.log。

async () => {
  ...
  setbtUS(tmpState);
  await console.log('tmpState: ', tmpState);
  await console.log('btUS: ', btUS);
}

Answer 3

您不会立即看到新状态，因为setState 以异步方式工作，因此它不会立即自我更新。由于这个原因，您第一次看到它不会在第一次立即更新。