React应用中如何通过两个数组正确渲染对应元素的组件

方案一：优化数据结构（推荐） #

把标题和笔记内容合并成对象数组管理，避免双数组索引不一致的问题，也更符合React状态管理的最佳实践。

修改后的完整代码：

function AddNotes() {
  const [noteDraft, setNoteDraft] = useState('');
  const [titleDraft, setTitleDraft] = useState('');
  // 用对象数组存储笔记，每个元素包含title和content字段
  const [notes, setNotes] = useState([]);

  function handleSubmit(e) {
    e.preventDefault();
    if (!noteDraft.trim() || !titleDraft.trim()) return;
    onAddItems(noteDraft, titleDraft);
    setNoteDraft('');
    setTitleDraft('');
  }

  function onAddItems(note, title) {
    setNotes(prevNotes => [...prevNotes, { title, content: note }]);
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="enter your title..."
          value={titleDraft}
          onChange={e => setTitleDraft(e.target.value)}
        />
        <>
          <textarea
            type="text"
            placeholder="type your note..."
            rows="7"
            cols="60"
            wrap="hard"
            value={noteDraft}
            onChange={e => setNoteDraft(e.target.value)}
          ></textarea>
          <button>Add note</button>
        </>
      </form>
      <div>
        {notes.map((item, index) => (
          <SingleNote 
            note={item.content} 
            title={item.title} 
            key={index} // 若笔记有唯一ID，优先用ID替代索引
          />
        ))}
      </div>
    </div>
  );
}

方案二：基于现有双数组的适配 #

如果不想修改现有状态结构，直接利用数组索引的对应关系渲染：

仅修改渲染区域的代码即可：

<div>
  {notes.map((noteContent, index) => (
    <SingleNote 
      note={noteContent} 
      title={titles[index]} 
      key={index} // 建议替换为唯一标识，比如title+note的哈希值
    />
  ))}
</div>

关键注意点 #

• 禁止用notes数组作为key，React要求key是每个元素的唯一标识，否则会引发渲染异常
• 确保notes和titles数组长度始终一致，可在提交时增加校验逻辑避免索引越界

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