React Context API无法正常工作：跨组件状态共享问题求助

核心问题1：Context 上下文引用与解构方式不匹配 #

你在Context.js中通过Mycontext.Provider传递的value是数组格式[post, setPost]，但在Tweet.js和App.js中犯了两个关键错误：

• 错误导入了Context组件本身，而非导出的Mycontext上下文对象
• 使用了对象解构const {post,setPost} = ...，和数组格式的value完全不匹配

修复代码：
在Tweet.js中修改导入和解构逻辑：

// Tweet.js
import React,{useContext,useRef,useEffect} from 'react'
import '../HomeMainStyling/HomeStyling.css'
import { Mycontext } from '../../context/Context'; // 改为解构导入Mycontext

function Tweet() {
    const tw = useRef('')
    const [post, setPost] = useContext(Mycontext); // 数组解构匹配value格式
    
    useEffect(() => {
        if (post.length) console.log(post);
      }, [post]);
    
    function PostNow(event){
        event.preventDefault();
        setPost((oldpost) => [tw.current.value,...oldpost]);
        tw.current.value = ''; // 可选：清空输入框提升体验
    }
    
    return (
        <div className="tweetcontainer">
            <textarea ref={tw} className="tweetinfo"></textarea>
            <button className="postIt" onClick={PostNow}>tweet</button>
        </div>
    )
}
export default Tweet

在App.js中做同样修改：

// App.js
import Tweet from './Center/HomeMain/Tweet';
import Tweets from './Center/HomeMain/Tweets';
import { useContext } from 'react';
import { Mycontext } from './context/Context'; // 改为导入Mycontext

function App() {
  const [post, setPost] = useContext(Mycontext); // 数组解构
  return (
    <div className="App">
      <Tweet/>
      <Tweets value={post}/>
    </div>
  );
}
export default App;

核心问题2：Tweets 组件未遍历数组数据 #

你传递给Tweets的value是数组post，直接渲染<h2>{value}</h2>只会将数组转为字符串（比如"内容1,内容2"），不会生成多个独立的<h2>元素。

修复代码：
修改Tweets.js，遍历数组生成对应元素：

// Tweets.js
import React from 'react'
import '../HomeMainStyling/HomeStyling.css'
function Tweets({value}) {
  return (
    <div className="tweets-container">
      {value.map((tweetContent, index) => (
        <h2 key={index}>{tweetContent}</h2>
      ))}
    </div>
  )
}
export default Tweets

验证说明 #

完成以上修改后，点击tweet按钮时：

1. 输入框的内容会被添加到Context的post数组中
2. App组件会感知到Context状态变化，重新渲染Tweets组件
3. Tweets组件遍历数组，为每条内容生成一个独立的<h2>元素

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