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

Posted 2023-04-14

【中文标题】我想访问另一个组件中处于另一个状态的数据到这个组件

【英文标题】：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 中编写它的方式，就像 <Info data=data/> 这样您将数据传递给 Info 组件

如果您想访问 Info 中的数据，只需将其呈现为 data 或 data.name 等等。

如果我将数据道具传递给 info 它会得到错误因为我已经有另一个 setShowInfoYes 到 info ，而且我想将前一个组件的值与 h1 标题并排呈现到 info 组件。比如：名称：（前一个表单组件的值）车辆类型：（前一个表单组件的值）

是的，在您检查上面的代码之前，我已经完成了 data.name 、 data.vehciletype 等操作？