Question

我有一个功能，其中React Component（Section.js）包含一个输入（用户ID）和一个按钮（删除用户）。我想基于给定的输入数字prop动态地渲染此React组件。如果prop值为4，我必须在同一页面上渲染4 Section.js。如果我单击特定部分上的“删除”按钮，则应删除该Section.js组件，并应立即对其进行更新。为此，我使用了数组来存储Section.js组件的列表以及在React状态下的计数以跟踪计数和sectionList。我的代码如下所示，工作正常，当我在代码存储库中集成以上代码时，它在主UI应用程序上渲染了10倍的输入道具（计数= 4 ==> 4 * 10 = 40倍）。这是因为useEffect还是该组件在主UI上呈现的次数。

Section.js

import React from "react";

import "./styles.css";

function Section({ id, removeUser }) {
  const handleRemove = () => {
    removeUser();
  };

  return (
    <div className="App">
      <input id={id} type="text" name="User" />
      <span>
        <button id={id} type="submit" className="button" onClick={handleRemove}>
          Remove
        </button>
      </span>
    </div>
  );
}

export default Section;

index.js

import React, { useState, useEffect, useCallback } from "react";
import ReactDOM from "react-dom";
import Section from "./Section";

import "./styles.css";

function App({ inputCount }) {
  inputCount = 3; // this is input to this component
  const [count, setCount] = useState(inputCount);
  const [sectionList, setSectionList] = useState([]);

  const removeUser = idx => {
    if (count > 1) {
      setSectionList(sectionList.filter(ele => idx !== ele.props.idx));
      setCount(count - 1);
    }
  };

  const handleAddUser = () => {
    if (count < 10) {
      setSectionList(
        <Section id={count + 1} removeUser={() => removeUser(count + 1)} />
      );
      setCount(count + 1);
    }
  };
  console.log('working...');

  useEffect(() => {
    setSectionList(
      Array.from(new Array(count), (c, ele) => {
        return <Section id={ele} removeUser={() => removeUser(ele)} />;
      })
    );
  }, [count, sectionList]);

  return (
    <React.Fragment>
      {sectionList}
      <button type="submit" className="button" onClick={handleAddUser}>
        Add User
      </button>
    </React.Fragment>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

styles.css

 

   .App {
      font-family: sans-serif;
      text-align: center;
    }

    .button {
      background-color: grey;
      color: white;
      border: 1px solid;
    }

**如果您想运行上面的代码，并且可以在使用useEffect（）挂钩中查看是否有错误，可以在codesandbox.io上运行。

注意：此组件在单独测试时可以正常工作，并且与主UI集成时会导致问题。简而言之，这是在小部件存储库中，我们正在主UI中导入该存储库。

仅通过使用React Hooks即可有效地实现此功能，还是需要redux框架。仅在此用例中使用React Hooks是否正确？这是正确的设计吗？

我也想首先将Section组件加载到useState（[]）中，而不是加载到useEffect（）中。

需要帮助。

如何使用Redux saga（渲染复杂组件时带有useEffect（）钩子的问题）实现有状态的React Functional组件？

0 个答案: