React报错：Objects are not valid as a React child及map遍历问题咨询

核心问题分析 #

1. 报错根源：你在表单提交时，把DOM元素对象直接推入了数组，而React无法渲染对象类型的子元素。

   • 在onSubmitHandle函数中，const options = e.target.elements.options获取到的是整个input DOM节点，不是输入框的文本值。当你把这个DOM对象push进app.options后，map遍历渲染<li key={item}>{item}</li>时，React尝试渲染对象，就会抛出Objects are not valid as a React child错误。

2. map遍历异常：数组里存的是DOM对象而非字符串，虽然map能遍历，但渲染时触发报错；同时用DOM对象作为key也不符合React的key规则（key需为稳定、唯一的字符串/数字）。

修复步骤 #

1. 修正表单提交逻辑 #

把获取DOM元素改为获取输入框的value属性，同时添加空值判断避免无效输入：

function onSubmitHandle(e){
    e.preventDefault();
    // 获取输入框的文本值，而非DOM元素
    const optionValue = e.target.elements.options.value.trim();
    // 仅当输入非空时添加到数组
    if(optionValue){
        app.options.push(optionValue);
        reRenderApp();
        e.target.elements.options.value = '';
    }
}

2. 优化map的key设置 #

数组现在存储的是字符串，直接用字符串作为key即可（若存在重复值，可改用索引或其他唯一标识）：

{app.options.map((item)=>{
    return <li key={item}>{item}</li>
})}

完整修正后的JS代码 #

var template = <h1>Indecision App</h1>;
var app = {
    title: 'Indecision App',
    subtitle: 'yo',
    options: []
}
let count = 0;
function checkSubtitles (subtitle){
    if(subtitle){
        return <p>{subtitle}</p>
    }else{
        return undefined
    }
}
function reset(){
    count = 0;
    reRenderApp();
}
function increaseCount(){
    count++;
    reRenderApp();
}
function onSubmitHandle(e){
    e.preventDefault();
    const optionValue = e.target.elements.options.value.trim();
    if(optionValue){
        app.options.push(optionValue);
        reRenderApp();
        e.target.elements.options.value = '';
    }
}
function removeAll(){
    app.options = [];
    reRenderApp();
}
function reRenderApp(){
    var templateTwo = (
        <div>
            <h1>{app.title}</h1>
            {checkSubtitles(app.subtitle)}
            <p>Count: {count}</p>
            <p>Array Length: {app.options.length > 0 ? app.options.length : '0 Items'}</p>
            <ol>
                {app.options.map((item)=>{
                    return <li key={item}>{item}</li>
                })}
            </ol>
            <hr></hr>
            <form onSubmit={onSubmitHandle}>
                <input type="text" name="options" />
                <input type="submit" value="Push to the Array" />
                <input type="reset" value="Empty my list" onClick={removeAll} />
            </form>
            <button onClick={()=>{
                increaseCount();
            }}>Increase Count</button>
            <button onClick={()=>{
               reset();
            }}>Reset Count</button>
        </div>
    )
    ReactDOM.render(templateTwo, appRoot)
}
var appRoot = document.getElementById('app');
reRenderApp();

额外提示 #

• React仅支持渲染原始类型（字符串、数字、布尔值等）或React元素，不能直接渲染对象、函数等复杂类型。
• 表单处理时，明确需求：大部分场景下需要的是输入值而非DOM元素。
• key用于帮助React识别列表项变化，优先使用唯一且稳定的标识，避免用索引（除非列表不会重新排序）。

内容的提问来源于stack exchange，提问作者localhost