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对象中。

儿童组件无法使用新道具刷新

1 个答案: