组件之外的 ReactJS 函数

Question

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

Answer 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 功能范围内还是之外，它都应该起作用。虽然还是建议放在里面，这样封装性更好。

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

Answer 3

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

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

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

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>