反应 - 未知道具，即使它们存在于响应中

Question

由于我在浏览器控制台中收到错误，我在从 API 呈现某些数据时遇到问题。

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

现在我知道这个问题已经被问过很多次了，但我找不到具体的答案。我是 React 的新手，来自 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。

然后，我将可用的配置从状态向下传递到子组件中：

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 } )

Answer 1

似乎您正在使用 https://react.semantic-ui.com/modules/dropdown/。

在这里，选项属性被指定为

下拉列表数组.项道具，例如{ text: '', value: '' }

有关每个选项项中允许的键，请参阅 https://react.semantic-ui.com/modules/dropdown/。

总之：在将配置对象作为选项提供给下拉列表组件之前，您必须对其进行转换。

像这样的东西可能会起作用：

options={configs.map( config => {text:config.name, value: config})}