Question

我想这可能是我的工作环境所特有的一个问题，但是我很高兴能从中获得一些见识和建议，因为下一步我会发疯。

我在IE8上使用React 0.14和IE11仿真模式。

在开发环境中，通常会在发现key={index}是反模式并修复它之前抛出以下错误-用从每个单独项目中获取的唯一值替换index，例如"product_" + product.id + "_" + product.value。这是动态生成的列表上的一个问题，因为每次更改都会对其进行重绘（请参见下文）。现在一切正常，不会引发任何错误。

SCRIPT5022：processUpdates（）：无法找到元素的子级9。这个可能意味着DOM发生了意外的突变（例如，浏览器），通常是由于在使用表时忘记了<tbody>，嵌套标签，例如<form>，<p>或<a>，或使用非SVG元素在<svg>父母中。尝试检查元素的子节点具有React ID .0。

注意：没有嵌套的<form>，<p>或<a>标记，也没有忘记<tbody>标记（没有表元素）。也没有<svg>父母。

但是，当在测试环境中上载相同的内部版本时，上述错误会不断抛出-显然是在具有某些动态生成的HTML元素的任何组件上。两种环境似乎具有相同的配置。唯一的区别在于谁可以访问每个环境。

列表组件示例（从服务中获取列表项，然后将其加载到Redux状态）：

import * as React from "react";

interface SuggestionProps extends React.HTMLProps<HTMLDivElement>{
    // props
};

const SuggestionInput = (allProps: SuggestionProps) => {
    const {...props} = allProps;

    return (
    <div className="form-group">
        <input 
            className="form-control" 
            type="text" 
            name={name} 
            value={value} 
            autoComplete="off"
            onChange={()=>changeAction(params)} 
            onBlur={()=>blurAction(params)} />
        <ul className="list-group suggestions">
        {
          listDisplay?
            suggestionList.map(function(elem: ListItem){
                return (
                    <li 
                      key={"list_item_" + elem.value + "_" + elem.zip} 
                      className="list-group-item" 
                      onClick={(e)=>listAction(e.currentTarget.value)}>
                            {elem.display}
                     </li>
                );
            })
          : null
        }
        </ul>
    </div>
    )
};

export default SuggestionInput;

另一个动态组件：

import * as React from "react";
import {isObjectEmpty} from '../utils/HelperMethods';

interface ProductProps extends React.HTMLProps<HTMLDivElement>{
    // props
};

const Product = (allProps: ProductProps) => {
    const {...props} = allProps;

    return (
        <div className={divClasses}>
            <label className={labelClasses}>
                <input 
                    name={name}                    
                    type="checkbox"
                    value={value} 
                    checked={checked} 
                    onClick={(e) => clickAction(e.currentTarget.value)}
                />
                {labelText}

                {   
                    extended?
                        !isObjectEmpty(extended) && selected?
                                <div style={{"fontSize": "8pt"}}>
                                    {extended.label}
                                    <input 
                                        id={extended.name + value}
                                        name={extended.name + value}
                                        type="text"
                                        size={3}
                                        value={extended.value? extended.value : ""}
                                        onChange={(e)=>secondaryAction(e.currentTarget.value) }
                                    />
                                    {
                                        Object.keys(extended[extended.key].inputNames).map((e, index) => {
                                            return (
                                                <input 
                                                key={extended[extended.key].inputNames[e] + value} 
                                                type="hidden" 
                                                name={ extended[extended.key].inputNames[e] + value } 
                                                value={ extended[extended.key][e] } 
                                                />
                                            )
                                        })
                                    }
                                </div>
                        : null
                    : null
                }                
            </label>
        </div>
    )  
};

export default Product;

请询问您需要的任何未提供的信息。预先感谢。

ReactJS在各个环境之间的构建不一致

0 个答案: