Question

我有一个带有按钮的功能组件。我想在单击该按钮时打印一个JSON字符串。但是，每当我尝试返回某些内容时，都会出现错误。

我的组件

const emp_details= (props) => {

  function getdata(data){
    //console.log('button clicked');

   console.log(data);
    let result = data.reduce((r,c) => 
  (r[c.company_code] = [...(r[c.company_code] || []), c.emp_code]) && r, {})

    const json = {emp_details : result};
    //console.log(JSON.stringify(json))

   return JSON.stringify(json);

  }

return (

      <div>
        <button onClick= {getdata(props.details)}>Display </button>

      </div>

    );

  };

export default ShoppingCart;

我收到此错误：

不变违规：预期onClick侦听器是一个函数，而得到的值为string类型。

如何显示JSON结果？我希望在屏幕上而不是在控制台上看到输出。因此，单击按钮后，它应该在标签或其他内容中显示输出。

emp_details: {
//json string of the state
}

Answer 1

之所以会这样，是因为您在组件呈现后立即调用getdata()。要解决此问题，您想将匿名函数传递给事件监听器，事件监听器将在事件实际发生时调用此函数。

  <div>
    <button onClick= {() => getdata(props.details)}>Display</button>

  </div>

要使数据在单击按钮后显示在组件内部，我们需要采用某种状态管理来强制重新渲染组件。

让我们考虑以下代码：

Index.js

import React from "react";
import ReactDOM from "react-dom";
import { useState } from "react";
import ShoppingCart from "./ShoppingCart";

const details = [
  {
    emp_code: "a001",
    company_code: "company_a",
    name: "abx",
    details: [],
    details_dtypes: []
  },
  {
    emp_code: "b002",
    company_code: "company_b",
    name: "xbz ",
    details: [],
    details_dtypes: []
  },
  {
    emp_code: "a002",
    company_code: "company_a",
    name: "xbz ",
    details: [],
    details_dtypes: []
  },
  {
    emp_code: "b003",
    company_code: "company_b",
    name: "xbz ",
    details: [],
    details_dtypes: []
  }
];

const App = () => {
  return (
    <div>
      <ShoppingCart details={details} />
    </div>
  );
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

因此，在上面的代码中，我们将数据作为称为详细信息的属性传递给ShoppingCart。

ShoppingCart.js

import React from "react";

import { useState } from "react";

const ShoppingCart = props => {
  //this gives us a state-value and state-updating function in that order. We passed in a default value of ""
  const [companies, setCompanies] = useState({});
  function getdata(data) {
    let result = data.reduce(
      (r, c) =>
        (r[c.company_code] = [...(r[c.company_code] || []), c.emp_code]) && r,
      {}
    );

    console.log(result);
    //create our data object and then update our state-value, forcing our component to re-render
    setCompanies(result);
  }

  //this creates a mark-up. It will get called again when we get an updated companies state value.
  const createMarkup = () => {
    //we're going to use the updated companies state-value now
    let markup = Object.entries(companies).map(
      ([companyName, array], index) => {
        return (
          <div key={index}>
            <p>{companyName}:</p>
            {array.map((emp, empIndex) => {
              return <p key={empIndex}>{emp}</p>;
            })}
          </div>
        );
      }
    );
    return markup;
  };

  return (
    //createMarkup() will be executed on re-render to display our markup
    <div>
      <div>{createMarkup()}</div>
      <button onClick={() => getdata(props.details)}>Display </button>
    </div>
  );
};

export default ShoppingCart;

我们传入props.detail中存储的数据作为getData（）的参数。 getData（）会将其解析为所需的结构，并返回结果。然后，将结果存储在钩子状态。

当组件重新渲染时，我们调用createMarkup（），从而为我们提供了包含我们所有公司和员工信息的JSX。

Answer 2

您不是将onClick设置为功能getdata，而是将功能getdata返回的值设置为。

当需要传递参数给函数时，使用包装函数all调用函数。

<button onClick= {() => getdata(props.details)}>Display </button>

Answer 3

function Emp_details(props) {
    function getdata(){
    console.log(props.details);
    }
  return <div><button onClick= {getdata}>Display </button></div>

}



ReactDOM.render(<Emp_details details = "John Doe"/>, document.getElementById('root'));

如何从函数返回变量并显示它

3 个答案:

Index.js

ShoppingCart.js