在 React Hooks 中渲染数据答案

【问题标题】：Render data in React Hooks在 React Hooks 中渲染数据
【发布时间】：2021-01-02 12:55:22
【问题描述】：

您好，我正在尝试将一个组件中的数据呈现给另一个组件，它们是彼此的兄弟。 使用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/

【问题讨论】：

标签： reactjs react-hooks use-state

【解决方案1】：

我更正了代码，现在它可以工作了！

App.js 中的 handleFromCert 应该收到 name 和 value；
App.js 中的 Panel 组件中的 value2 传递时出错；
handleFromCert in Certifications.js setValue 更改不正确。

Certifications.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;

App.js

import React, { useState } from "react";
import Certifications from "./Certifications";
import Panel from "./Panel";

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

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

  return (
    <div>
      {value.value1}
      {value.value2}
      <Certifications handleFromCert={handleFromCert} />
      <Panel value1={value.value1} value2={value.value2} />
    </div>
  );
};

export default App;

【讨论】：

谢谢！你听说过吗？
是的，我听说了。我们最近开始在工作中使用 Formik。到目前为止，我喜欢一切
你可以帮助我这里还有我亲爱的朋友stackoverflow.com/questions/63925561/…

【解决方案2】：

问题在于您没有将事件作为参数传递，而是在传递值并且您的函数正在期待该事件。在您的认证组件中更改：

  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);
  };

您的函数 handleFromCert 正在等待该事件，而您只是传递一个字符串值，不能像事件一样进行解构。

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

【讨论】：