时间戳

首页 > 解决方案 > 用新的道具值渲染组件的变化？

javascript - 用新的道具值渲染组件的变化？

问题描述

我的反应应用程序应该使用搜索栏中的值呈现各种小部件。理论上，我搜索一些东西，小部件使用与搜索值对应的脚本显示数据。目前，当我搜索某些内容时，小部件不会使用与新搜索值对应的数据重新呈现。

这是一个小部件的代码：

import React, { Component } from 'react';

class SSIWidget extends  React.Component {
    constructor(props){
        super(props);
    }
    
    componentDidMount() {
        const script = document.createElement('script');
        script.src ="https://s3.tradingview.com/external-embedding/embed-widget-symbol-info.js";
        script.async = true;
        script.innerHTML = JSON.stringify(
        {
            "symbol": props.value,
            "width": 1000,
            "locale": "en",
            "colorTheme": "light",
            "isTransparent": false
        }
    )
    document.getElementById("myContainer6").appendChild(script); 
}

render() {
    
    return(
        <div id="myContainer6">
            <div className="tradingview-widget-container">
            <div className="tradingview-widget-container__widget">
                </div>
            </div>
        </div>
    );
}
}
export default SSIWidget;

我尝试使用以下资源解决我的问题：

如何使用 React js 在 onchange 中将数据从一个组件传递到另一个组件

Reactjs - 将状态值从一个组件传递到另一个组件

我正在为小部件传递一个初始化的搜索值，它显示数据很好，所以我知道我正确地传递了状态，但是当我搜索一个新值时，它仍然显示初始值数据而不是新值数据，带给我根据我的假设：问题可能是因为仅在组件安装时才调用具有搜索值的脚本，而不是在每次渲染时调用。

如何将 componentDidMount() 中的脚本添加到 render() 以便每次道具值更改时小部件重新渲染？

标签： javascriptreactjs

解决方案

你应该componentDidUpdate在这里使用，将你的逻辑移动到一个单独的函数中，调用它componentDidMount并在componentDidUpdate何时调用它prevProps.value !== this.props.value

从反应文档：

更新发生后立即调用componentDidUpdate() 。初始渲染不调用此方法。当组件更新时，将此作为对 DOM 进行操作的机会。这也是进行网络请求的好地方，只要您将当前的 props 与以前的 props 进行比较（例如，如果 props 没有更改，则可能不需要网络请求）。

componentDidMount() {
    this.addWidget();
}

componentDidUpdate(prevProps, prevState) {
    if(prevProps.value !== this.props.value) {
        this.addWidget();
    }
}


addWidget = () => {
    // add widget logic
}

推荐阅读