React组件间数据传递问题：表单提交数据无法展示且map报错

核心问题 #

1. map调用报错：NameList中对form调用map，但form是单个对象而非数组，map仅支持数组操作，因此抛出错误。
2. 数据传递断层：组件间无状态共享机制，NameForm的提交数据无法传递到NameList。
3. 输入框与命名错误：NameForm里两个输入框均为firstname，缺少lastname输入项；组件导入/使用时大小写不匹配。
4. 语法错误：NameList中<p>标签的插值写法错误。

修复后的代码 #

1. App.js（维护全局状态，实现数据共享） #

import { useState } from 'react';
import Nameform from './NameForm';
import NameList from './NameList';

function App() {
  // 用数组存储多条提交的姓名数据
  const [nameList, setNameList] = useState([]);

  // 接收NameForm传递的新数据，添加到数组
  const handleAddName = (newName) => {
    setNameList([...nameList, newName]);
  };

  return (
    <div>
      <div className='layout-row justify-content-center mt-100'>
        <div className='w-30 mr-75'>
          {/* 把添加方法传递给NameForm */}
          <Nameform onAddName={handleAddName} />
        </div>
        <div className='layout-column w-30'>
          {/* 把姓名数组传递给NameList */}
          <NameList form={nameList} />
        </div>
      </div> 
    </div>
  )
}

export default App;

2. NameForm.js（修正输入框，提交时传递数据） #

import { useState } from 'react';

function Nameform({ onAddName }) {
  const [form, setForm] = useState({firstname: "", lastname: ""});

  const handleChange = (e) => {
    setForm({
      ...form,
      [e.target.id]: e.target.value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 调用App的方法，传递当前表单数据
    onAddName({...form});
    // 清空表单
    setForm({firstname: "", lastname: ""});
  }

  return (
    <section>
      <div className='card pa-30'>
        <form onSubmit={handleSubmit}>
          <div className='layout-column mb-15'>
            <label htmlFor='firstname' className='mb-3'>First Name</label>
            <input 
              type='text' 
              id='firstname'
              placeholder='Enter Your First Name'
              data-testid='nameInput'
              value={form.firstname}
              onChange={handleChange}
            />
          </div>
          {/* 修正为lastname输入框 */}
          <div className='layout-column mb-15'>
            <label htmlFor='lastname' className='mb-3'>Last Name</label>
            <input 
              type='text' 
              id='lastname'
              placeholder='Enter Your Last Name'
              data-testid='lastNameInput'
              value={form.lastname}
              onChange={handleChange}
            />
          </div>
       
          <div className='layout-row justify-content-end'>
            <button 
              type='submit'
              className='mx-0'
              data-testid='addButton'
            >
              Add Name
            </button>
          </div>
        </form>
      </div> 
    </section>
  )
}

export default Nameform;

3. NameList.js（修正map调用与语法错误） #

function NameList({ form }) {
    return (
      <section>
        {/* 空数组时显示提示 */}
        {form.length === 0 ? (
          <p>No names added yet.</p>
        ) : (
          <ul className='styled w-100 pl-0'>
            {/* 对数组进行map，添加唯一key避免React警告 */}
            {form.map((displayName, index) => (
              <li 
                key={index}
                className='flex slide-up-fade-in justify-content-between'
              >
                <div className='layout-column w-40'>
                  <h3 className='my-3'>{displayName.firstname}</h3>
                  {/* 修正p标签插值语法 */}
                  <p className='my-0'>{displayName.lastname}</p>
                </div>
              </li>
            ))}
          </ul>
        )}
     </section>
  )
}

export default NameList;

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