时间戳

首页 > 解决方案 > 如何将变量从 React 中的处理程序传递到其他代码区域？

javascript - 如何将变量从 React 中的处理程序传递到其他代码区域？

问题描述

我不是 JS 和 React 的专业人士（大约 2-3 个月前才开始），现在正试图修改我正在工作的项目之一。我的大部分问题都与 React 中的范围有关。下面是我试图将一组对象从 Button onClick 处理程序传递到生成 excel 文件的组件的代码。

处理程序部分是主组件和渲染部分的子组件 - 同一组件的一部分。

处理程序：

const Reports = (props) => { ....

let xlsxFileHandler =() => {
if (dataSource) {
    table = document.querySelectorAll("table");
    table1=table[0];
    table2=table[1];
    output = document.querySelector("pre");
    data2 = parseTable(table1,table2);  
}
}   

...

渲染部分：

return (
        <>
            <Layout> ....


<ExcelFile element={<button>Download Excel 2</button>}>
                    <ExcelSheet data={data2} name="Employees">
                        <ExcelColumn label="Name" value="card_number"/>
                        <ExcelColumn label="Wallet Money" value="controller_address"/>
                        <ExcelColumn label="Name" value="department_abbreviation"/>
                        <ExcelColumn label="Name" value="department_name"/>
                        <ExcelColumn label="Name" value="event_code_code"/>
                        <ExcelColumn label="Name" value="event_code_name"/>
                        <ExcelColumn label="Name" value="first_name"/>
                        <ExcelColumn label="Name" value="id"/>
                    </ExcelSheet>
                </ExcelFile>

……

我无法将 data2 变量传递给渲染部分，它说未定义：

未捕获的类型错误：无法读取未定义的属性“forEach”

   at t.value (ExcelFile.js:66)
    at ExcelFile.js:96
    at D (react.production.min.js:18)
    at e (react.production.min.js:17)
    at R (react.production.min.js:18)
    at Object.forEach (react.production.min.js:20)
    at t.value (ExcelFile.js:94)
    at Object.s (react-dom.production.min.js:14)
    at d (react-dom.production.min.js:14)
    at react-dom.production.min.js:14

如果我将 data2 作为回调从渲染传递到处理程序，它说几乎相同并且页面是空白的。如何在运行时访问反应表？据我了解，我不能直接访问 React DOM。

同时我可以 console.log 在点击处理程序中记录 data2：

0: {Фамилия: " ", Имя: " ", Отчество: " ", Департамент: " ", Проходная: " ", ...} "", ...} .....更多数据长度：65 proto : Array (0)

标签： javascriptreactjs

解决方案

您必须将 的值存储data2在一个状态中。
如果您使用的是类组件。来自https://reactjs.org/docs/state-and-lifecycle.html的示例：

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

如果您使用的是 Function 组件。来自https://reactjs.org/docs/hooks-state.html的示例：

  import React, { useState } from 'react';

  function Example() {
    const [count, setCount] = useState(0);

    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
         Click me
        </button>
      </div>
    );
  }

来自https://www.geeksforgeeks.org/reactjs-state-react/#:~:text=What%20is%20State%3F,the%20lifetime%20of%20the%20component。

状态是 React 组件类的一个实例，可以定义为一组可观察属性的对象，这些属性控制组件的行为。换句话说，组件的状态是一个对象，它包含一些可能在组件的生命周期内发生变化的信息。

我会说状态相当于letReact 组件中的 a。所以如果你需要一个他的值会在组件生命周期内改变的 var，你需要一个 State

推荐阅读