React函数组件间如何传递文本输入框状态值并使用map？

完全可行，核心思路是状态提升——把共享状态放到两个组件的共同父组件中，再通过props把状态和更新方法分发给子组件，这样既不用把所有逻辑堆在App.js，还能实现组件间的状态共享。

具体实现步骤 #

1. 新建一个容器父组件，集中管理共享状态
   这个父组件不用负责具体UI，只需要维护quotes数组和添加新内容的方法，再把它们传给子组件。

2. 修改第一个组件（Firstcomp）
   移除自身的useState，通过props接收父组件传来的添加方法，专注处理输入和提交逻辑。

3. 修改第二个组件（SecondComp）
   通过props接收quotes数组，用map()方法遍历渲染所有内容。

修改后的代码示例 #

容器父组件（QuoteContainer.js）

import React, { useState } from "react";
import Firstcomp from "./Firstcomp";
import SecondComp from "./SecondComp";

function QuoteContainer() {
  const [quotes, setQuotes] = useState(["hi there", "greetings"]);

  // 定义添加新内容的方法
  const addQuote = (newQuote) => {
    setQuotes(old => [newQuote, ...old]);
  };

  return (
    <div>
      <Firstcomp addQuote={addQuote} />
      <SecondComp quotes={quotes} />
    </div>
  );
}

export default QuoteContainer;

第一个组件（Firstcomp.js）

import React, { useRef } from "react";

function Firstcomp({ addQuote }) {
  const reference = useRef();

  function sub(event) {
    event.preventDefault();
    const newQuote = reference.current.value.trim();
    if (newQuote) {
      addQuote(newQuote);
      reference.current.value = ""; // 提交后清空输入框
    }
  }

  return (
    <>
      <div>
        <div>
          <div>
            <h4>jon snow</h4>
          </div>

          <form onSubmit={sub}>
            <textarea
              ref={reference}
              placeholder="Type your tweet..."
            />
            <button type="submit">Tweet</button>
          </form>
        </div>
      </div>
    </>
  );
}

export default Firstcomp;

第二个组件（SecondComp.js）

import React from "react";

function SecondComp({ quotes }) {
  return (
    <div>
      <h4>所有推文</h4>
      {quotes.map((item, index) => (
        // 注意：如果内容可能重复，建议用唯一ID作为key，这里暂时用index示例
        <p key={index}>{item}</p>
      ))}
    </div>
  );
}

export default SecondComp;

补充说明 #

• 这种方式遵循React的单向数据流原则，状态变化清晰可追踪
• 如果后续项目复杂度提升，需要更多组件共享状态，可以考虑使用Context API，但当前场景下状态提升已经足够简洁高效
• 原代码中console.log(quotes)看不到最新值是因为setQuotes是异步操作，需要用useEffect监听状态变化才能看到更新后的值（不过在这个实现里已经不需要在Firstcomp里打印了）

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