如何將 state 從一個組件轉移到另一個？

Question

我有一個將姓名、年齡和性別作為用戶輸入的表單。 單擊提交按鈕時，我想將表單的 state 傳輸到App.js ，在那里我可以將 state 與用戶一起添加到數組中。 如何將 state 從Form.js轉移到App.js ？

//Form.js

export const Form = ({ onClick }) => {
  const [form, setForm] = useState({
    name: "william",
    age: 31,
    gender: "male",
  });
  return <div><input type="submit" onClick={onClick}/></div>;
};

//App.js

export const App = () => {
  const [users, setUsers] = useState({
    name: "Anna",
    age: 24,
    gender: "female",
  });

  function addUser(e) {
    e.preventDefault();
  }
  return (
    <div>
      <Form onClick={addUser} />
    </div>
  );
};

Answer 1

您需要將 function 傳遞給將新用戶作為參數的表單組件：

//Form.js
import React, { useState } from 'react';

export const Form = ({ onClick }) => {
  const [form, setForm] = useState({
    name: "william",
    age: 31,
    gender: "male",
  });
  return <div>
    <input type="submit" onClick={() => onClick(form)}/>
  </div>;
};

//App.js

export const App = () => {
  const [users, setUsers] = useState([{
    name: "Anna",
    age: 24,
    gender: "female",
  }]);

  function addUser(newUser) {
    setUsers([...users, newUser]);

  }
  return (
    <div>
      <Form onClick={(newUser) => addUser(newUser)} />
    </div>
  );
};

在您的 onClick 中，您將其稱為 function 並傳入新用戶。 這個 addUser function 將您在 App 的 state 中已有的用戶傳播到一個新數組中，然后將新用戶添加到其中。 請注意，您需要一個數組來跟蹤多個用戶 - 您之前只是一個 object。

希望這是有道理的！

Answer 2

ReactJS 是一個單向框架。

單向數據流是一種主要在函數式反應式編程中發現的技術。 它也被稱為單向數據流，這意味着數據有一種，並且只有一種方式可以傳輸到應用程序的其他部分。 從本質上講，這意味着子組件無法更新來自父組件的數據。 在 React 中，來自父級的數據稱為 props

如果您試圖使數據流動，那么這不是正確的方法，這意味着有更好的方法可用。

您可以通過useRef來實現這一點，但是在擴展您的應用程序時，您可能會因為這個缺陷而遇到麻煩。

/Form.js
import React, { useState } from 'react';

export const Form = ({ onClick }) => {
  const [form, setForm] = useState({
    name: "william",
    age: 31,
    gender: "male",
  });
  return <div>
    <input type="submit" onClick={() => onClick(form)}/>
  </div>;
};

//App.js

export const App = () => {
const ref = React.createRef();
  const [users, setUsers] = useState([{
    name: "Anna",
    age: 24,
    gender: "female",
  }]);

  function addUser(newUser) {
    setUsers([...users, newUser]);

  }
  return (
    <div>
      <Form ref={ref} onClick={(newUser) => addUser(newUser)} />
    </div>
  );
};

現在通過ref你在父組件中有一個子組件的引用。 您可以在其上放置任何事件偵聽器，它會起作用。