文章/答案/技术大牛

发布

社区首页 >问答首页 >通过互父叶数组将数组状态数据从子组件向上传递到兄弟组件，短于一个。

问通过互父叶数组将数组状态数据从子组件向上传递到兄弟组件，短于一个。
EN

Stack Overflow用户

提问于 2022-11-08 20:58:32

回答 1查看 23关注 0票数 0

此Footer组件创建一个数组。我想让这个数组在同级Body组件中可用。我希望通过将reminders数组变量通过其共同的Body组件向上传递到Body组件中来实现这一点。

import './style.css'

function Footer({ linkToFooter }){
  const [reminder, setReminder] = useState("");  
  const [reminders, setReminders] = useState([]);

  const submitThis = (e) => {
      e.preventDefault();
      if (reminder){
        let newReminder = {
          reminder: reminder,
          complete: false,
         };
         setReminders(prevRems => [...prevRems, newReminder])
         setReminder('');
     } else {
      setReminder("oops there's a problem");
    }
  };

  useEffect(
    () => { localStorage.setItem('reminders', JSON.stringify(reminders)); }, 
    [reminders]
  );

  console.log(reminders, "from Footer");

  return(
    <div className="rm-list-footer">
      <form onSubmit={submitThis}>
        <input 
          id='newReminder' 
          type='text'
          value={reminder}
          onChange={(e) => setReminder(e.target.value)}
        />
        <button onClick={() => linkToFooter(reminders)} type='submit'>+</button>
      </form>
    </div>
  )
}

export default Footer;

这是我想要成为两个子组件之间的分段的Parent函数组件。

import Header from "./Header";
import Footer from "./Footer";
import Body from "./Body";

function RmList() {
  const [reminders, setReminders] = useState([])
  
  return(
    <div className="rm-list">
    <Header></Header>
    <Body reminders={reminders}></Body>
    <Footer linkToFooter={setReminders}></Footer>
    </div>
  );
}

export default RmList;

最后，我的目标是在每次单击console.log组件中的按钮时，在这个同级Body组件中使用Footer数组。问题是，在Body中登录的数组总是在每次单击Footer之后的一个元素。

import React from "react";

function Body({reminders}) {
  console.log(reminders, "from Body");

    return(
        <div className="rm-list-body"></div>
    );
}

export default Body;

经过研究，我想我的问题可能与改变这个有关。

setReminders([newReminder, ...reminders])

到这个

setReminders(prevRems => [...prevRems, newReminder])

但这是徒劳的，因为我不能把prevRems传递给父母。

非常感谢您的帮助。

react-hooks

components

state

javascript

reactjs

回答 1

Stack Overflow用户

发布于 2022-11-08 21:20:06

如果我正确理解，你希望能够在一个孩子中设置提醒，在兄弟姐妹中看到提醒。如果这是正确的，提醒作为一个状态应该只在父级。然后，您可以将状态和状态设置器传递给孩子，并通过道具访问他们。通过在孩子身上重新声明“提醒”，你可能会有一种国家冲突。

另外，最好的做法是将正在传递的道具命名为这样。

<Footer setReminders={setReminders}>

所以在较大的项目上很容易跟随你的道具之路

试一试

import './style.css'

CHANGE >>>> function Footer({  linkToFooter > setReminders }){
  const [reminder, setReminder] = useState("");  
REMOVE >>>> const [reminders, setReminders] = useState([]);

  const submitThis = (e) => {
      e.preventDefault();
      if (reminder){
        let newReminder = {
          reminder: reminder,
          complete: false,
         };
         setReminders(prevRems => [...prevRems, newReminder])
         setReminder('');
     } else {
      setReminder("oops there's a problem");
    }
  };

  useEffect(
    () => { localStorage.setItem('reminders', JSON.stringify(reminders)); }, 
    [reminders]
  );

  console.log(reminders, "from Footer");

  return(
    <div className="rm-list-footer">
      <form onSubmit={submitThis}>
        <input 
          id='newReminder' 
          type='text'
          value={reminder}
          onChange={(e) => setReminder(e.target.value)}
        />
CHANGE >>>> <button onClick={() => linkToFooter > setReminders(reminders)} type='submit'>+</button>
      </form>
    </div>
  )
}

export default Footer;

让我知道这是否有助于引导你朝着正确的方向前进。希望这些小技巧能帮助您提高代码的可读性。祝好运!

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74367101

复制

相似问题

问通过互父叶数组将数组状态数据从子组件向上传递到兄弟组件，短于一个。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过互父叶数组将数组状态数据从子组件向上传递到兄弟组件，短于一个。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过互父叶数组将数组状态数据从子组件向上传递到兄弟组件，短于一个。
EN