Javascript React钩子-使用不带事件处理程序的道具更新状态

我是一个比较新的反应者，这就是我试图实现的目标：

用户从侧边栏中选择一个项目

elementID被提升到父级（app.js）

app.js将其发送给其子项Graphs

Graphs将创建一个Graph组件并附加到其

Graph

数组中

还有比这更好的方法吗？另外，在这个组件中，我将有超过1个

useffect

App.js
 - Sidebar
 - Title-bar
 - Graphs

function Graphs(props) {
  const [graphs, addGraphs] = useState([]);

  useEffect(() => {
    if (props.graphID) {
      addGraphs(graphs.concat(props.graphID));
    }
  }, [props.graphID]);

  return (
    <div>{graphs}</div>
  );
}

App.js
-边栏
-标题栏
-图表
函数图（道具）{
const[graphs，addGraphs]=useState（[]）；
useffect（（）=>{
如果（道具图）{
addGraphs（graphs.concat（props.graphID））；
}
}，[props.graphID]）；
返回(
{图}
);
}

---

谢谢大家!

我认为这是一个好方法，但您应该使用功能状态更新。

React.useState

hook的“setter”函数有一个前一状态的回调，因此您应该像这样更新它：

import React from "react";

function MyComponent({id}) {
  const [list, setList] = React.useState([]);

  React.useEffect(() => {
    if (id) {
      setList(previousState => {
         return [
             ...previousState,
             id
         ];
      });
    }
  }, [id]);

  return (
    <div>
        {
            list.map((_id, index) => {
                <p key={index}>
                    {_id.toString()}
                </p>
            )
         }
    </div>
  );
}

从“React”导入React；
函数MyComponent（{id}）{
const[list，setList]=React.useState（[]）；
React.useffect（（）=>{
如果（id）{
集合列表（先前状态=>{
返回[
…以前的状态，
身份证件
];
});
}
}，[id]）；
返回(
{
list.map（（_id，index）=>{

{u id.toString（）}

)
}
);
}

像你那样发送道具没有什么错

如果您正在寻找其他状态管理选项，您可以查看本机React、hook来创建您自己的系统

---

如果您只是想选择一个ID并将其发送到另一个组件，那么最好使用

props

或

useContext

。

应该使用功能更新，即

addGraphs（graphs=>graphs.concat（props.graphID））

但除此之外，不，不是真的。不过，在本地状态中存储通过的道具是一条很好的路线，这通常是一种反反应模式。不相关的问题是，为什么要将传递的道具存储到子状态？到目前为止，在我的应用程序中，结构是：app.js>标题栏、侧栏、图表。当我从侧栏选择一个项目时，它会将元素ID提升到app.js，然后将其发送到图表。图表将根据用户在侧栏上的选择保存组件列表（目前它只是一个ID列表）.对，在我看来，这似乎是属于呈现要从中选择的列表的组件的状态…所选图形ID的整个列表应传递给子级。您希望真相的来源尽可能集中。我猜侧边栏必须是主区域的父级，或者我使用上下文。感谢！这是什么使用前一个状态与修改当前状态的好处？例如：在本例中，或者增加计数器。您会选择哪种方式？好处是确保您正确地从前一个状态更新，而不是从上一个渲染周期更新状态。这是一个微妙但极为重要的区别。如果您将mor排队不使用函数更新将覆盖以前的更新。一个好的经验法则是“任何时候状态更新依赖于任何以前的状态，请使用函数更新”。从以前的状态获取数组并附加元素是一种依赖关系。