在React Hooks中渲染数据

如何解决在React Hooks中渲染数据

您好，我尝试将一个组件中的数据呈现给另一个组件，这两个组件是彼此的同级。 具有useState Hook （rff），基于组件代码（rcf）

index.js -> is entry point,that calls only one component App,as we have no route
App.js -> is the parent component,which has two child,Certification and Panel
Certification.js -> takes input
Panel -> renders data from certification

我知道我对handleFromCert有问题（这是我的句柄更改功能）

这是我的代码-rff

https://codesandbox.io/s/zen-paper-gil-xcyj3?file=/src/

此处基于rcf的代码运行正常

https://codesandbox.io/s/elegant-shtern-362ki?file=/src/

解决方法

我已更正代码，现在可以正常工作！

handleFromCert中的
1. App.js应该收到name和value；
value2的{​​{1}}组件中的
2. Panel传递错误；
App.js handleFromCert中的
3. Certifications.js更改不正确。

Certifications.js

setValue

App.js

import React,{ useState } from "react";

const Certifications = (props) => {
  const [value,setValue] = useState({
    value1: "",value2: ""
  });

  const handleFromCert = ({ target: { value,name } }) => {
    setValue(prevState => ({ ...prevState,[name]: value }));
    props.handleFromCert(name,value);
  };

  return (
    <div>
      <input name="value1" onChange={handleFromCert} />
      <input name="value2" onChange={handleFromCert} />
      <div>
        Inside certificate
        <div>{value.value1}</div>
        <div>{value.value2}</div>
        Certificate ends
      </div>
    </div>
  );
};

export default Certifications;

,

问题是您没有将事件作为参数传递，而是在传递值，并且函数正在等待该事件。在您的“认证”组件中更改以下内容：

  const handleFromCert = (e) => {
   setValue({
    [e.target.name]: e.target.value
   });
   props.handleFromCert((e.target.name,e.target.value));
  };

对此：

  const handleFromCert = (e) => {
   setValue({
    [e.target.name]: e.target.value
   });
   props.handleFromCert(e);
  };

您的handlehandCert函数正在等待该事件，而您只是传递了一个字符串，并且不能像事件一样被破坏。

这是为我工作的沙箱： https://codesandbox.io/s/zen-paper-gil-forked-r01fh