React：使用异步数据从父组件更新子组件状态

Question

我有一个 react 应用程序，当父级异步获取学生列表时，StudentView（父级）需要更新 Table 组件（子级）。

父组件

const StudentView = () => {
    const [studentData, setStudentData] = useState();  

   useEffect(() => {
     let url = "/api/students";
    axios
      .get(url)
      .then((response) => {
        setStudentData(response.data);
      })
  }, []);

  return (
    <div>
      <div className="container">
        <Table tableRows={studentData} />
      </div>
    </div>
  );
};
export default StudentView;

子组件（表格）

const Table = ({  tableRows }) => {
  
 
  return (
    
      <table className="table table-striped border">
         {createTableBody(tableRows )}
      </table>
    
  );
};

export default Table;

问题是父级获取数据后，表没有更新。

Answer 1

诀窍是在子组件中使用useEffect 与从父组件传递的值

const Table = ({  tableRows }) => {
  const [rows, setRows] = useState(tableRows);
  useEffect(() => {
    if (tableRows) {
      setRows(tableRows);
    }
  }, [tableRows]);

 

  return (
    <table className="table table-striped border">
         {createTableBody(rows)}
      </table>
  );
};

export default Table;

Answer 2

去掉子组件中的状态钩子，prop tableRows已经是一个状态变量，会触发子组件中的重新渲染。

const Table = ({  tableRows }) => {

return (
  <table className="table table-striped border">
     {createTableBody(tableRows)}
  </table>