我想访问另一个组件中处于另一个状态的数据到这个组件

Posted

技术标签:

【中文标题】我想访问另一个组件中处于另一个状态的数据到这个组件【英文标题】:i want to access data that is in another state in another component to this component 【发布时间】:2021-04-01 01:43:18 【问题描述】:

。我制作了一个带有 h1 标题的弹出窗口,但我无法检索另一个组件中处于另一个状态的值。我试过这样,但它只显示标题但没有值。我如何在 react js 功能组件中做到这一点。

import React from 'react'
import data from "./MyVehicles"
import "./InfoYes.css"

function Info( setShowInfoYes ) 
    return (
        <div className="modal">
      <div className="box">
         
          <h1 className="h1__info"> Name: data.name</h1>
            <h1 className="h1__info"> Vehicle type: data.vechiletype</h1>
            <h1 className="h1__info"> vehicle name: data.selectvehicle</h1>
            <h1 className="h1__info"> registration date: data.registrationdate</h1>
            <h1 className="h1__info"> tax expire date: data.taxexpiredate</h1>
            <h1 className="h1__info"> pick up: data.pickup</h1>
            <button className="calculate__button">Calculate</button>
          </div>
        </div>
        
    )


export default Info

【问题讨论】:

您的问题有点不清楚,能否详细说明一下? 我想渲染我在上一页输入的值,即另一个组件,它是我将值放入数据状态的表单。 你能把其他组件的代码也粘贴一下吗? @NikhilRoka 你可以lift the state 或使用context @Sakshi 是的,当然...完成了。 【参考方案1】:

以下是您的表单组件:

...code...
return (
        ..other divs..
    <Info data=data setShowInfoYes=provide some value here/>
    )

信息组件:

import React from 'react'
import "./InfoYes.css"

export default ( data, setShowInfoYes ) => 
 
  return(
<div className="modal">
      <div className="box">
         
          <h1 className="h1__info"> Name: data.name</h1>
            <h1 className="h1__info"> Vehicle type: data.vechiletype</h1>
            <h1 className="h1__info"> vehicle name: data.selectvehicle</h1>
            <h1 className="h1__info"> registration date: data.registrationdate</h1>
            <h1 className="h1__info"> tax expire date: data.taxexpiredate</h1>
            <h1 className="h1__info"> pick up: data.pickup</h1>
            <button className="calculate__button">Calculate</button>
          </div>
        </div>
  )
  



如果 Info 的 prop 中存在 setShowInfoYes,那么它的值也必须传递,而不仅仅是数据的值。

【讨论】:

我不明白你在做什么?! 您想将 data 从 Form 组件传递到 Info 组件,对吗?所以这就是您在表单组件的 return 中编写它的方式,就像 &lt;Info data=data/&gt; 这样您将数据传递给 Info 组件 如果您想访问 Info 中的数据,只需将其呈现为 datadata.name 等等。 如果我将数据道具传递给 info 它会得到错误因为我已经有另一个 setShowInfoYes 到 info ,而且我想将前一个组件的值与 h1 标题并排呈现到 info 组件。比如:名称:(前一个表单组件的值)车辆类型:(前一个表单组件的值) 是的,在您检查上面的代码之前,我已经完成了 data.name 、 data.vehciletype 等操作?

以上是关于我想访问另一个组件中处于另一个状态的数据到这个组件的主要内容,如果未能解决你的问题,请参考以下文章

在 React 中将状态数据从一个组件传递到另一个组件

将状态从钩子函数导出到另一个组件

如何将状态从一个组件转移到另一个?

如何响应 redux 中的状态变化并派发另一个动作?

将数据从一个组件访问到另一个组件

Angular 4:路由到另一个组件后保存组件状态