组件之外的 ReactJS 函数

Posted 2023-02-22

【中文标题】组件之外的 ReactJS 函数

【英文标题】：ReactJS functions outside of component

【发布时间】：2022-01-03 10:19:11

【问题描述】：

刚刚在 ReactJS 进行了一次面试，给了我一个奇怪的模板，其中一些函数（question1()、question2()、question3()）在组件之外

我被要求打印名称并添加一个按钮以将新对象添加到数据中，然后屏幕将更新为新名称

1。 假设我只允许更改 question1()、question2() 的返回值。 question3()，是否可以将'setName'传递给question1()、question2()、question3()？

2。 把这些函数（question1(), question2(), question3()）移到App组件里面是不是唯一的办法？

import React from "react";
import "./styles.css";

function question1() 
  return "---";

function question2() 
  return "---";

function question3() 
  return "---";


export default function App() 

const [name, setName] = useState();

  const data = [
    
      name: "Ruby",
      stars: 10,
      popularity: "90%"
    ,
    
      name: "Elliot",
      stars: 90,
      popularity: "100%"
    ,
    
      name: "Holly",
      stars: 55,
      popularity: "15%"
    ,
    
      name: "Jack",
      stars: 50,
      popularity: "1%"
    ,
    
      name: "",
      stars: 0,
      popularity: ""
    
  ];

  return (
    <div className="App">
      <h2>Code the answers below!</h2>
      <p>
        Question 1:
        <br />
      </p>
      question1(data)
      <br />
      <br />
      <p>
        Question 2:
        <br />
      </p>
      question2(data)
      <br />
      <br />
      <p>
        Question 3:
        <br />
      </p>
      question3(data)
      <br />
      <br />
      <p>
        Question 4:
        <br />
      </p>
      <button>Add another entry</button>
      <br />
      <br />
    </div>
  );

【问题讨论】：

这里的代码是他们给你的还是你完全修改过？

除了“const [name, setName] = useState()”，其他都给了。

他们是否解释了问题功能的目的是什么？目前，您被要求做的只是列出名称，并提供一个按钮，以及一些新功能以将新对象添加到数组中。

其实就是这样，没有多余的信息。他们将这些代码放在代码沙箱中，每个人都在 Teams 中看着我。所以，我想知道是否只允许更改那些函数的返回值（1、2、4）

【参考方案1】：

我不确定问题是什么。

你的意思是这样的吗？

function question1(setter, data) 
  setter(data[0].name);
  return data[0].name;

...
question1(setName, data)

这行不通，因为每次渲染时，它都会尝试调用question1(...)，而setName(...) 会调用setName(...)，从而导致渲染无限循环。这将被 react 捕获并且会中断。无论函数是在 App 函数范围内还是外部，都会发生这种情况。

将函数用作元素是不推荐/不好的做法，尤其是当函数触发导致重新渲染的钩子时。

编辑：

如果您的意思是函数question1(), 2, 3 正在返回一些静态数据并且没有调用任何触发重新渲染的异步钩子。然后，无论它是在 App 功能范围内还是之外，它都应该起作用。虽然还是建议放在里面，这样封装性更好。

【参考方案2】：

我想我被问题模板分心了，这就是答案

import React, useState from "react";
import "./styles.css";

function question1(data) 
let result = '';
  
data.forEach((element, index, array) => 
    result += element.name;
  
  )

  return result;

function question2(data, setData) 

  setData(   [...data, 
    name: "Ruby",
    stars: 10,
    popularity: "90%"
  ]);
  return "---";




function question3() 
  return "---";


export default function App() 

  const [data, setData] = useState([
    
      name: "Ruby",
      stars: 10,
      popularity: "90%"
    ,
    
      name: "Elliot",
      stars: 90,
      popularity: "100%"
    ,
    
      name: "Holly",
      stars: 55,
      popularity: "15%"
    ,
    
      name: "Jack",
      stars: 50,
      popularity: "1%"
    ,
    
      name: "",
      stars: 0,
      popularity: ""
    
  ]);



  return (
    <div className="App">
      <h2>Code the answers below!</h2>
      <p>
        Question 1:
        <br />
      </p>
      

question1(data)
      
      <br />
      <br />
      <p>
        Question 2:
        <br />
      </p>
      
      <br />
      <br />
      <p>
        Question 3:
        <br />
      </p>
      question3(data)
      <br />
      <br />
      <p>
        Question 4:
        <br />
      </p>
      <button onClick=() => question2(data, setData) >Add another entry</button>
      <br />
      <br />
    </div>
  );

【讨论】：

您不应该像这样将setData 函数传递给问题函数。您还没有解释问题功能的用途。面试问题要求您做的只是列出名称，并添加一些功能以将新对象添加到数据中。为什么不使用表单来添加新的 obj？

所以，我想更好的方法是将这些函数（1、2、3）放在组件中，然后我不必像这样传递 setData ......正如我所说，我被模板分心了，想知道是否只允许更改函数（1、2、3）的返回值

【参考方案3】：

我确信模板对某些东西很有用，但对您设定的要求没有用。分别是：

列出数据数组中每个对象的名称 有一个向数组添加新对象的按钮

以下是我的处理方法。请注意，为方便起见，我将数据作为道具传递给组件，并且我添加了一个包含三个输入的表单，以便您可以添加所需的信息。

const  useState  = React;

function Example( input ) 

  // Set two states. The first holds the data.
  // The second holds an object that is updated
  // when the input values change
  const [ data, setData ] = useState(input);
  const [ newUser, setNewUser ] = useState();

  // If an input value changes update the
  // newUser object using the name and the value
  function handleChange(e) 
    const  name, value  = e.target;
    setNewUser( ...newUser, [name]: value );
  

  // When the button is clicked update
  // the data state with object stored in
  // the `newUser` state
  function handleClick() 
    const updated = [ ...data, newUser ];
    setData(updated);
  

  // `map` over the data and display each name
  return (
    <div>
      data.map(obj => 
        return <div>obj.name</div>;
      )
      <form onChange=handleChange>
        Name: <input type="text" name="name" value=newUser.name /><br />
        Stars: <input type="text" name="stars"  value=newUser.stars /><br />
        Popularity: <input type="text" name="popularity"  value=newUser.popularity /><br />
        <button type="button" onClick=handleClick>Add new person</button>
      </form>
    </div>
  );
;

const data=[name:"Ruby",stars:10,popularity:"90%",name:"Elliot",stars:90,popularity:"100%",name:"Holly",stars:55,popularity:"15%",name:"Jack",stars:50,popularity:"1%",name:"",stars:0,popularity:""];

ReactDOM.render(
  <Example input=data />,
  document.getElementById('react')
);

form, button  margin-top: 1em; 

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

【讨论】：

这是有道理的