从反应状态函数组件获取数据

Question

我有两个功能组件，一个有输入和按钮，它将数据传递到状态。现在，我想从第一个函数conlmponent获得状态数据到第二个组件，并在第二个部件中向我的div显示文本。是否可以共享从第一个组件到第二个组件的状态数据？该组件是功能而非类

function Articles(){
return(<div>
<h1>{inputtext}</h1>
</div>)
}
function Inputform() {
const [inputtext, setInputtext] = useState('');
const [task_list,setTask_list] = useState([]);
function changer(event){
setInputtext(event.target.value);
}
function add_post(){
setTask_list(inputtext);
}
return (
<div>
<label>Post</label>
<input name="first" onChange={changer} />
<button onClick={add_post}>Dodaj</button>
</div>
)
}

试图从Input获取文章中的状态，但它不起作用

Answer 1

您想要做的是将这两个组件放在第三个组件中，并让它们共享您想要的任何状态/数据。

function ThirdComponent() {
const [inputtext, setInputtext] = useState('');
const [task_list,setTask_list] = useState([]);
function Articles(){
return(<div>
<h1>{inputtext}</h1>
</div>)
}
function Inputform() {

function changer(event){
setInputtext(event.target.value);
}
function add_post(){
setTask_list(inputtext);
}
return (
<div>
<label>Post</label>
<input name="first" onChange={changer} />
<button onClick={add_post}>Dodaj</button>
</div>
)
}
return (
<>
</>
) 
}

Answer 2

状态属于一个组件。它不创建全局变量。

如果您想将数据从一个状态传递到另一个组件，那么：

• 收件人必须是保存数据的元素的子级
• 你可以将其作为道具传递

因为你没有<Article propName={stateVariable} />，所以你不能这么做。

---

如果目的地不是保持状态的元素的子级，则需要提升状态。

1. 将useState挂钩移动到<Article>和<Inputform>的祖先组件
2. 将set函数作为道具传递给<Inputform>
3. 将状态值变量作为道具传递给<Article>

---

对于复杂系统，其中公共祖先与需要处理状态的组件相距甚远，您可以考虑使用Context或像Redux这样的外部状态管理系统。