在 React Hooks 中渲染数据

Question

您好，我正在尝试将一个组件中的数据渲染到另一个组件，这两个组件是彼此的兄弟姐妹。 with 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/

Answer 1

问题是您没有将事件作为参数传递，您传递的是值，而您的函数需要事件。在您的认证组件中更改此：

  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

Answer 2

我更正了代码，现在可以使用了！

handleFromCert in App.js 应该收到 name 和 value;
value2 in the Panel in the Panel component in App.js is passed with an error;
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;

在 React Hooks 中渲染数据

Render data in React Hooks

reactjs

react-hooks

use-state