Блог

В этом компоненте react я хочу отображать данные в своей консоли, когда пользователь нажимает кнопку «В ИЗ ВЫБРАННЫХ ЕДИНИЦ», но кнопка должна быть нажата дважды, чтобы данные отображались в консоли.

Пожалуйста, игнорируйте: похоже, что ваш пост в основном состоит из кода; пожалуйста, добавьте еще несколько деталей. Похоже, что ваш пост в основном состоит из кода; пожалуйста, добавьте еще несколько деталей. Похоже, что ваш пост в основном состоит из кода; пожалуйста, добавьте еще несколько деталей. Похоже, что ваш пост в основном состоит из кода; пожалуйста, добавьте еще несколько деталей.

Вот мой код:

 const unitTests = props => {
  const autoComplete = useContext(AutoCompleteContext)
  const loading = useContext(LoadingContext)
  const snackbar = useContext(SnackbarContext)
  const user = useContext(UserContext)

  const query = new URLSearchParams(props.location.search)
  const targetObjectFromURL = query.get('object')

  const cookies = new Cookies()

  const [unitTestsData, setUnitTestsData] = useState(null)
  const [database, setDatabase] = useState('')
  const [targetObject, setTargetObject] = useState(null)
  const [unitTestsMode, setUnitTestsMode] = useState('Object')
  const [AddRemoveDatabaseChanges, setAddRemoveDatabaseChanges] = useState(null)
  const [AddRemoveDatabaseMode, setAddRemoveDatabaseMode] = useState('ADD')

  console.log(unitTestsData);
  useEffect(() => {
    async function onLoadUnitTests() {
      loading.setLoading(true)
      const [objectsAutoCompleteResults, databaseAutoCompleteResults] = await Promise.all([
        get('get_objects_autocomplete/all/all/b', user.user),
        get('get_databases_autocomplete/a', user.user)
      ])
      autoComplete.setObjectsAutoComplete(objectsAutoCompleteResults)
      autoComplete.setDatabasesAutoComplete(databaseAutoCompleteResults)
      if(targetObjectFromURL) setTargetObject(targetObjectFromURL)
      else if(cookies.get('table')) setTargetObject(cookies.get('table'))
      loading.setLoading(false)
    }

    onLoadUnitTests()
  }, [])

  useEffect(() => {
    async function getUnitTests() {
      loading.setLoading(true)
      const optionalParams = unitTestsMode === 'Object'
        ? `?type=objectamp;target=${targetObject}`
        : `?type=databaseamp;target=${database}`
      const url = `get_unit_tests${optionalParams}`
      const results = await verifiedGet(url, user.user)
      if(results.status === 0) {
        setUnitTestsData(results.data)     
        } else if(results.status >= 20 amp;amp; results.status <= 30) {
        snackbar.statusCheck(results)
        user.setSessionTokenMatches(false)
      } else snackbar.statusCheck(results)
      loading.setLoading(false)
    }

    if(targetObject || database) getUnitTests()
  }, [targetObject,database])


  const onObjectSelect = (e, value) => {
    props.history.push(`/unittests?object=${value}`)
    setTargetObject(value)

    cookies.set('table', value, { path: '/'})
  }

  const onNewTestCaseClick = () => {
    props.history.push(`/createtest?object=${targetObject}`)
  }

  const onDatabaseSelect = (e, value) => setDatabase(value)

  const onChangeUnitTestsMode = (e) => setUnitTestsMode(e.target.getAttribute('value'))

  
  const onChangeAddRemoveMode = (e) => setAddRemoveDatabaseMode(e.target.getAttribute('value'))

  console.log(AddRemoveDatabaseMode);
  const addtoproduction = () => {

    let databaseChanges = unitTestsData.map(tests => { 
    return {
      "unit_test_id": tests.unit_test_template_id,
      "databases": tests.databases
    }
  })
     setAddRemoveDatabaseChanges(databaseChanges)
  
  if(AddRemoveDatabaseChanges != null amp;amp; AddRemoveDatabaseMode === 'ADD'){
   
    console.log('added data', AddRemoveDatabaseChanges);

  } else if (AddRemoveDatabaseChanges != null amp;amp; AddRemoveDatabaseMode === 'REMOVE') {
    
    console.log('removed data', AddRemoveDatabaseChanges )

  }
  }

  return (
    <PageWrapper title='View Unit Tests'>
      <div className='Main UnitTestsAutoCompleteWrapper' style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
        <div style={{width: '30%', marginRight: '10px'}}>
          <DropdownSingle
            options={['Object', 'Database']}
            value='Object'
            name='Search unit tests'
            onChange={onChangeUnitTestsMode}
          />
        </div>

      {unitTestsMode === 'Object' ?
        <div>
          <AutoCompleteSingle
            name='Table'
            label='Table'
            options={autoComplete.objectsAutoComplete}
            onChange={autoComplete.onObjectAutoCompleteFieldUpdate}
            onSelect={onObjectSelect}
            uniqueIdentifier={0}
            initialValue={targetObject}
          />
        </div> :
      
      
        <div style={{display: 'flex', justifyContent: 'space-between' }}>
        <div style={{width: '100%'}}>
          <DropdownSingle
            options={['ADD', 'REMOVE']}
            value='ADD'
            name='Search unit tests'
            onChange={onChangeAddRemoveMode}
          />
        </div>
          <AutoCompleteSingle
            name='Database'
            label='Database'
            options={autoComplete.databasesAutoComplete}
            onChange={autoComplete.onDatabaseAutoCompleteFieldUpdate}
            onSelect={onDatabaseSelect}
            uniqueIdentifier={1}
            style={{width: '1000%'}}
            />

          <div>
          <Button 
          text='TO/FROM SELECTED UNIT TESTS'
          onClick={addtoproduction}

           />
        </div>
        </div>

      }
      </div>
      
      {!unitTestsData ? null :
        !unitTestsData.length ?
        <div>
          This table has no associated unit tests
          <div style={{marginTop: '20px'}}>
            <Button
              text='New Test Case'
              icon={<AddIcon className='ButtonIcon' />}
              onClick={onNewTestCaseClick}
              className='Button Dark Main'
              style={{width: '200px'}}
            />
          </div>
        </div>
        :
        unitTestsMode === 'Object' ?
      <UnitTestsObjectView unitTestsData={unitTestsData}/>
      : <UnitTestsDatabaseView unitTestsData={unitTestsData} />
      }

      {!targetObject ? null :
        <div style={{position: 'fixed', bottom: '80px', right: '40px'}}>
          <Button
            text='New Test Case'
            icon={<AddIcon className='ButtonIcon' />}
            onClick={onNewTestCaseClick}
            className='Button Dark Main'
          />
        </div>
      }

    </PageWrapper>
  )
}

export default withRouter(unitTests)