setState不会更改/重新渲染

Question

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

问题

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

我试图：

• 从我的主应用程序中传递一个更大的状态，一旦我启动条件逻辑（挂钩规则）就无法工作。

当我点击其中一个按钮时，控制台会给我以下信息：

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以异步方式工作，所以它不会立即更新自己。由于这个原因，第一次你不会在第一次看到它立即更新。