子组件未使用新道具刷新

Question

我有包含以下代码的父组件：

<div>
{widgetList.map((widget,index,array) => {
const zIndex = array.length - index;
return(
<div key={widget._id} style={{zIndex}}>
<RenderWidget 
widget={widget} 
index={index} 
array={array} 
dataWidgetRead={dataWidgetRead} 
widgetValues={widgetValues} 
rofileType={props.profileType} 
handleOpenProfileWidget={handleOpenProfileWidget} 
isResizable={isResizable} 
setWidgetValues={setDataFromWidget}/>
</div>
)
} )}
</div>

RenderWidget 返回一个依赖于 "widget.type" 的组件。

我写的所有参数都是状态RenderWidget。WidgetValues 是一个通过套接字接收新参数的对象。我需要当 WidgetValues 更改时，我使用 renderWidget 函数渲染的组件会重新渲染，但它没有发生。

有人知道为什么吗？

---

渲染函数：

const RenderWidget = (props) => {
const { widget, index, array, dataWidgetRead, widgetValues, profileType, handleOpenProfileWidget, isResizable, setWidgetValues } = props;
const actions = <WidgetMenuButton />
if (
widget.widgetType === 'TEXT' ||
widget.widgetType === 'MAP' ||
widget.widgetType === 'HTML' ||
(dataWidgetRead && widget.connectedDevices[0].historicaldata)
) {
let connectedDevice;
let attributes;
let historicalData;
let data;
const actions = (
<WidgetMenuButton
widget={widget}
profileType={profileType}
entity={'widget'}
clickView={handleOpenProfileWidget}
/>
);
switch (widget.widgetType) {
case 'BARS':
if (widgetValues[widget._id] === undefined) {
data = formatToDataBarwidget(widget.connectedDevices);
setWidgetValues(widget._id, data);
}
if(!widgetValues[widget._id]){
return null
}else{
return (
<>
<WidgetCard
className="d-block"
title={widget.name}
actions={actions}
>
<BarChart
height={'100%'}
details={widgetValues[widget._id]}
title={widget.name}
actions={actions}
axisBottomText={widget.configurationWidget['label-x']}
axisLeftText={widget.configurationWidget['label-y']}
orientation={widget.configurationWidget.orientation}
/>
</WidgetCard>
</>
);
}
case 'LINES':
if (widgetValues[widget._id] === undefined) {
data = formatToDataLinewidget(widget.connectedDevices, widget.configurationWidget);
data.legendX = widget.configurationWidget['label-x']
? widget.configurationWidget['label-x']
: 'Fecha';
data.legendY = widget.configurationWidget['label-y']
? widget.configurationWidget['label-y']
: 'Valor';
setWidgetValues(widget._id, data);
}
if(!widgetValues[widget._id]){
return null
}else{
return (
<WidgetLineApexChart
title={widget.name}
actions={actions}
details={widgetValues[widget._id]}
id={widget._id}
/>
);
}
case 'INVALID':
return (
<WidgetCard title={widget.name} actions={actions}>
No ha sido posible cargar los datos del dispositivo, compruebe
la configuración e inténtelo de nuevo.
</WidgetCard>
);
default:
return (
<WidgetCard title={widget.name} actions={actions}>
No ha sido posible cargar los datos del dispositivo, compruebe
la configuración e inténtelo de nuevo.
</WidgetCard>
);
}
} else {
return (
<WidgetCard title={widget.name} actions={actions}>
No ha sido posible cargar los datos del dispositivo, compruebe la
configuración e inténtelo de nuevo.
</WidgetCard>
);
}
}

以及我从套接字收到的函数：

const getAttributesByWebSocket = message => {
if(message[0] === '{'){
try {
const messageDecoded = JSON.parse(message);
const toUpdate = getWidgetToUpdate(messageDecoded);
const newValues = refreshWidgetData(toUpdate, messageDecoded, widgetValues);
setWidgetValues(newValues);
} catch (e) {
return console.log('Bad Response: ', e);
}
}
return true;
}

例如，如果我用字符串更改此函数的newValues，则引发新渲染，但使用具有新值的对象，不。

Answer 1

你可以使用RenderWidget作为组件而不是函数：

<div>
{widgetList.map((widget,index,array) => <RenderWidget widget={widget} index={index} array={array} dataWidgetRead={dataWidgetRead} widgetValues={widgetValues} profileType={props.profileType}, handleOpenProfileWidget={handleOpenProfileWidget} isResizable={isResizable} setDataFromWidget={setDataFromWidget} />)}
</div>
const RenderWidget = ({widget, index, array, dataWidgetRead, widgetValues, profileType, handleOpenProfileWidget, isResizable, setDataFromWidget}) => {

为了更简单起见，您还可以将道具收集到一个props对象中。