Реагировать - неизвестные реквизиты, даже если они существуют в ответ - PullRequest
Новая
       50

Реагировать - неизвестные реквизиты, даже если они существуют в ответ

0 голосов
/ 16 января 2020

У меня проблемы с рендерингом некоторых данных из API из-за ошибки, которую я получаю в консоли браузера. 

warning.js:33 Warning: Unknown props `scriptVersionId`, `configVersionId`, `model`, `manufacturer`, `refSubType` on <div> tag. Remove these props from the element.

Теперь я знаю, что об этом спрашивали несколько раз, но я не могу найти конкретный ответ. Я новичок ie, чтобы реагировать после того, как пришел из Java фона.

Таким образом, это работает следующим образом:

Родительский компонент загружает данные из API: 

  loadApplicableConfigsForDevice = (type, currentConfig) => {
    if (type != null && currentConfig != null) {
        console.log(type);
        console.log(currentConfig);
        deviceApi.getConfigs(type, currentConfig)
            .then(availableConfigs => {
                console.log("Response Data " + availableConfigs);
                this.setState({availableConfigs})
            })
    }
}

Это загружает данные, как и ожидалось, и ответ в браузере выглядит следующим образом: 

[ 
{ 
"name":"Hard Wired - LMU 2630 - Driver ID Car Config",
"scriptVersionId":41,
"configVersionId":12,
"description":"OBD",
"model":"LMU 3030",
"manufacturer":"CalAmp",
"refSubType":"OBD"
},
{ 
"name":"OBD - LMU 3030 - Car Config",
"scriptVersionId":200,
"configVersionId":33,
"description":"OBD",
"model":"LMU 3030",
"manufacturer":"CalAmp",
"refSubType":"OBD"
},
{ 
"name":"OBD - LMU 3030 - Car Config",
"scriptVersionId":200,
"configVersionId":33,
"description":"OBD",
"model":"LMU 3030",
"manufacturer":"CalAmp",
"refSubType":"OBD"
},
{ 
"name":"OBD - LMU 3030 - Large Van Config",
"scriptVersionId":201,
"configVersionId":17,
"description":"OBD",
"model":"LMU 3030",
"manufacturer":"CalAmp",
"refSubType":"OBD"
},
{ 
"name":"OBD - LMU 3030 - Small Van Config",
"scriptVersionId":202,
"configVersionId":16,
"description":"OBD",
"model":"LMU 3030",
"manufacturer":"CalAmp",
"refSubType":"OBD"
},
{ 
"name":"OBD - LMU 3030 - VBus- Car Config",
"scriptVersionId":220,
"configVersionId":12,
"description":"OBD",
"model":"LMU 3030",
"manufacturer":"CalAmp",
"refSubType":"OBD"
},
{ 
"name":"OBD - LMU 3030 - VBus- Car Config",
"scriptVersionId":220,
"configVersionId":12,
"description":"OBD",
"model":"LMU 3030",
"manufacturer":"CalAmp",
"refSubType":"OBD"
},
{ 
"name":"OBD - LMU 3030 - VBus- Car Config",
"scriptVersionId":220,
"configVersionId":12,
"description":"OBD",
"model":"LMU 3030",
"manufacturer":"CalAmp",
"refSubType":"OBD"
},
{ 
"name":"OBD - LMU 3030 - VBus- Large Van Config",
"scriptVersionId":221,
"configVersionId":10,
"description":"OBD",
"model":"LMU 3030",
"manufacturer":"CalAmp",
"refSubType":"OBD"
},
{ 
"name":"OBD - LMU 3030 - VBus- Small Van Config",
"scriptVersionId":222,
"configVersionId":11,
"description":"OBD",
"model":"LMU 3030",
"manufacturer":"CalAmp",
"refSubType":"OBD"
},
{ 
"name":"OBD - LMU 3030 - VBus- Small Van Config",
"scriptVersionId":222,
"configVersionId":11,
"description":"OBD",
"model":"LMU 3030",
"manufacturer":"CalAmp",
"refSubType":"OBD"
}
]

Итак, я знаю, что вызов API работает, поскольку он извлекает данные. Как вы можете видеть, я затем setState с availableConfigs, возвращенным из ответа.

Затем я передаю availableConfigs из состояния в дочерний компонент: 

 render() {
    const { availableConfigs } = this.state

 return (
 <Grid.Row>
                <Grid.Column width={10}>
                    <EventStatistics
                        device={device} />
                </Grid.Column>
                <Grid.Column width={6}>
                    <DeviceInfo device={device} configs={availableConfigs} handleDeviceUpdate={this.updateDevice} userPreferences={userPreferences} />
                </Grid.Column>
            </Grid.Row>

В дочернем компоненте метод рендеринга компонентов, затем я получаю реквизиты const { device, userPreferences, configs } = this.props; и затем передаю это значение в раскрывающийся объект 

<Table.Row>
                        <InfoHeader name='Configuration Version' />
                        <Table.Cell>
                            <Dropdown
                                loading={settingConfig}
                                disabled={!configEditable}
                                placeholder='Set Config Version'
                                options={configs}
                                value={formatConfigName( device )}
                                onChange={this.handleConfigChange} />
                            <EditButton editingEnabled={configEditable} onClick={this.toggleConfigEdit} />
                            {/*{formatConfigName( device )}*/}
                        </Table.Cell>

Обратите внимание, что я передаю {configs} в часть параметров раскрывающегося списка.

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

 state = {
    device: {},
    events: []
}

Я знаю, что это может быть просто для некоторых людей, но я уже несколько часов бьюсь головой об этой проблеме. Любая помощь будет принята с благодарностью !!!

РЕДАКТИРОВАТЬ 

import React, { Component } from 'react'
import { Table, Label, Dropdown, Button, Segment, Divider, Grid } from 'semantic-ui-react'
import { toast } from 'react-toastify'

import { getAllSimGroups } from 'api/commonApi'
import { setSimGroup, getConfigs } from 'api/deviceApi'
import { formatDate } from 'utils/commonUtils'
import { formatConfigName } from 'utils/deviceUtils'

import { SendCommand } from 'areas/customer-management'
import { PermissionWrapper } from 'common/ui'
import { IssueWizard } from "common/issue-wizard";

class DeviceInfo extends Component {

constructor(props) {
    super(props);
    this.state = {
        simGroups: [],
        configs: [],
        simGroupEditable: false,
        settingSimGroup: false,
        configEditable: false,
        settingConfig: false
    };
}

componentDidMount() {
    getAllSimGroups()
        .then( simGroups => simGroups.map( formatSimGroup ) )
        .then( simGroups => this.setState( { simGroups } ) )
}


toggleSimGroupEdit = () => this.setState( { simGroupEditable: !this.state.simGroupEditable } );

handleSimGroupChange = ( e, data ) => {
    console.log("Configs " + this.state.configs);
    this.setState( { settingSimGroup: true, simGroupEditable: false } );
    const { imei, iccid } = this.props.device;
    setSimGroup( imei, iccid, data.value )
        .then( this.props.handleDeviceUpdate )
        .catch( error => toast.error( error.message ) )
        .then(() => this.setState( { settingSimGroup: false } ) )
};

handleConfigChange = ( e, data ) => {
    console.log( data.value );
    console.log("Configs " + this.state.configs);
    this.setState( { settingConfig: true, configEditable: false } );
    // const {type, config.name} = this.props.device;
    getConfigs(this.props.device.type, this.props.device.config.name)
        .then( this.props.handleDeviceUpdate )
        .catch( error => toast.error( error.message ) )
        .then(() => this.setState( { settingConfig: false } ) )
};

toggleConfigEdit = () => this.setState( { configEditable: !this.state.configEditable } );

render() {
    const { simGroupEditable, simGroups, settingSimGroup, configEditable, settingConfig } = this.state;
    const { device, userPreferences, configs } = this.props;
    const simGroupCode = device.simGroup != null ? device.simGroup.code : 'SimGroup Not Set';

    return (
        <Segment raised>
            <Grid>
                <Grid.Row>
                    <Grid.Column width={8}>
                        <PermissionWrapper responsibilities={userPreferences.responsibilities} responsibility='SEND_SMS' >
                            <SendCommand iccid={device.iccid} />
                        </PermissionWrapper>
                    </Grid.Column>
                    <Grid.Column width={3}></Grid.Column>
                    <Grid.Column width={5}>    
                        <IssueWizard
                            id={device.imei}
                            context='IN_USE'
                            type='DEVICE'
                            trigger={<Button content="Check Device for Issues" size='large' />} 
                        />
                    </Grid.Column>
                </Grid.Row>
            </Grid>
            <Divider />

            <Table size='small' compact singleLine verticalAlign='middle'>
                <Table.Body>
                    <Table.Row>
                        <InfoHeader name='Vehicle Reg' />
                        <Table.Cell>{device.vehReg}</Table.Cell>
                    </Table.Row>
                    <Table.Row>
                        <InfoHeader name='IMEI' />
                        <Table.Cell>{device.imei}</Table.Cell>
                    </Table.Row>
                    <Table.Row>
                        <InfoHeader name='First Message' />
                        <Table.Cell>{formatDate( device.activationDate )}</Table.Cell>
                    </Table.Row>
                    <Table.Row>
                        <InfoHeader name='Last Message' />
                        <Table.Cell>{formatDate( device.lastMessageTime, 'HH:mm DD MMMM YYYY' )}</Table.Cell>
                    </Table.Row>
                    <Table.Row>
                        <InfoHeader name='Service ID' />
                        <Table.Cell>{device.serviceId}</Table.Cell>
                    </Table.Row>
                    <Table.Row>
                        <InfoHeader name='ICCID' />
                        <Table.Cell>{device.iccid}</Table.Cell>
                    </Table.Row>
                    <Table.Row>
                        <InfoHeader name='Sim Group' />
                        <Table.Cell>
                            <Dropdown
                                loading={settingSimGroup}
                                disabled={!simGroupEditable}
                                placeholder='Set Sim Group'
                                options={simGroups}
                                value={settingSimGroup ? 0 : simGroupCode}
                                onChange={this.handleSimGroupChange} />
                            <EditButton editingEnabled={simGroupEditable} onClick={this.toggleSimGroupEdit} />
                        </Table.Cell>
                    </Table.Row>
                    <Table.Row>
                        <InfoHeader name='Configuration Status' />
                        <Table.Cell>{device.config ? device.config.status : ''}</Table.Cell>
                    </Table.Row>
                    <Table.Row>
                        <InfoHeader name='Configuration Version' />
                        <Table.Cell>
                            <Dropdown
                                loading={settingConfig}
                                disabled={!configEditable}
                                placeholder='Set Config Version'
                                options={configs}
                                value={formatConfigName( device )}
                                onChange={this.handleConfigChange} />
                            <EditButton editingEnabled={configEditable} onClick={this.toggleConfigEdit} />
                            {/*{formatConfigName( device )}*/}
                        </Table.Cell>
                    </Table.Row>
                </Table.Body>
            </Table>
        </Segment>
    )
}
}

export default DeviceInfo

const InfoHeader = ( { name } ) => (
<Table.Cell width={6}>
    <Label className='fluid text-center' size='medium' color='blue' content={name} />
</Table.Cell>
);

const EditButton = ( { onClick, editingEnabled } ) => (
<Button
    compact
    size='mini'
    negative={editingEnabled}
    floated='right'
    content={editingEnabled ? 'Cancel' : 'Edit'}
    onClick={onClick} />
  );

// const formatConfig = conf => ( { key: conf.name, text: formatConfigName( conf ), value: formatConfigName( conf ) } );

const formatSimGroup = sg => ( { key: sg.id, text: sg.name, value: sg.code } )

1 Ответ

0 голосов
/ 16 января 2020

Похоже, вы используете https://react.semantic-ui.com/modules/dropdown/.

Здесь опора опций указана как

Массив Dropdown.Item реквизит, например { text: '', value: '' }

См. https://react.semantic-ui.com/modules/dropdown/ о допустимых ключах в каждом элементе опции.

В итоге: вам необходимо преобразовать объект конфигурации перед тем, как давать в раскрывающемся списке в качестве параметров.

Примерно так может работать: 

options={configs.map( config => {text:config.name, value: config})}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...