简体   繁体   English

React如何从子组件更新App.js中的数据

[英]React how to update the data in App.js from child component

I'm building a React App.我正在构建一个 React 应用程序。 I don't have a backend server.我没有后端服务器。 Instead, I used a .json file called securities.json as the backend server.相反,我用一个叫做文件上传.json securities.json作为后端服务器。 The .json file list the securities and the price list in each security. .json 文件列出了每种证券的证券和价格表。

What I am attempting to do is to submit the updated price list to the securities.json on App.js, a parent component, from its child component.我试图做的是将更新的价目表提交给 App.js 上的 security.json,这是一个父组件,从它的子组件。 I noticed that when I add a new price in the Price Popup window and then close it but rechecked the Price Popup window again.我注意到当我在价格弹出窗口中添加一个新价格然后关闭它但再次重新检查价格弹出窗口时。 The new price that I entered disappeared.我输入的新价格消失了。 I couldn't figure out how to solve it.我想不出如何解决它。 I'm trying to pass it up to App.js as one developer suggested.我正在尝试按照一位开发人员的建议将其传递给 App.js。

Can someone please take a look at my code in CodeSandBox?有人可以看看我在 CodeSandBox 中的代码吗? https://codesandbox.io/s/github/kikidesignnet/caissa https://codesandbox.io/s/github/kikidesignnet/caissa

Two solutions:两种解决方案:

  1. Use Redux: https://react-redux.js.org/使用 Redux: https : //react-redux.js.org/

  2. Use reacts context system: https://reactjs.org/docs/context.html使用 reacts 上下文系统: https : //reactjs.org/docs/context.html

you can also pass an update function as props to your child component which updates the state of the parent.您还可以将更新函数作为道具传递给您的子组件,以更新父组件的状态。

My guess is price list is set in constructor.我的猜测是价目表是在构造函数中设置的。 There the state is set from props.那里的状态是从道具设置的。 On change of props, the price list state is not updated as setting state happens in constructor which executed only once.在道具更改时,价格表状态不会更新,因为设置状态发生在仅执行一次的构造函数中。 You need to update state when ever props get changed.你需要在道具改变时更新状态。

This is the code I am talking about这是我正在谈论的代码

  constructor(props) {
    super(props);

    this.state = {
      priceArr: this.props.pricelist,
      // newPriceArr: this.props.updatePrice,
      showPricePopup: false,
      addPricePopup: false,
      isToggleOn: true,
      date: props.date || "",
      number: props.number || ""
    };
  } 

You may need to use getDerivedStateFromProps to set state when props change.您可能需要使用getDerivedStateFromProps来设置道具更改时的状态。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何从App.js更新呈现的React组件的道具? - How to update the props of a rendered react component from App.js? 如何在反应中显示从addImg.js(子组件)到app.js(父组件)的输入框值 - How to display input box value from addImg.js (child component) to app.js (parent component) in react 如何在反应路由器中从 app.js 访问组件参数 - How to access component parameters from app.js in react router 如何在 React 中将状态从组件传递到文件 app.js - How to pass state from component to file app.js in React 如何将 next.js 中的 pageProps 从子组件传递给 _app.js? - How to pass pageProps in next.js from a child component to _app.js? 如何在 react native 中使用其他组件更新 app.js 的 state? - how to update the state of app.js using other component in react native? 如何获取父App.js中的navbar子组件state? - How to obtain navbar child component state in parent App.js? React JS如何显示组件onclick,但不在App.js中 - React JS How to display component onclick, but not in App.js 如何在 ReactJS v16+ 中将获取的 object 从 App.js 异步传递给子组件 - How to pass a fetched object from App.js to a child component asynchronously in ReactJS v16+ 我如何使用post将React组件从server.js渲染到App.js? - How can I render a React component from server.js to App.js using post?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM