在 React 中渲染兄弟组件答案

【问题标题】：Rerender sibling component in React在 React 中渲染兄弟组件
【发布时间】：2022-01-06 01:50:26
【问题描述】：

我是 React 新手。我现在被这个问题困扰了好几天。我有一个父组件，它包含两个兄弟组件“FileUpload”和“Documents”

“FileUpload”用于上传文件，“Documents”用于显示所有上传的文件。

我希望在通过“FileUpload”上传新文件后重新呈现“Documents”，以便在 UI 中显示新文件。

实现这一目标的最佳方法是什么？

以下是我目前为兄弟组件编写的代码：

 FileUpload:

import React, { useState } from "react";
import Axios from "axios";

const FileUpload = (props) => {
  const [files, setFiles] = useState([]);
  const onInputChange = (e) => {
    setFiles(e.target.files);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    const data = new FormData();

    for (let i = 0; i < files.length; i++) {
      // console.log(files);
      data.append("file", files[i]);
    }

    data.append("parentDbId", props.parentDbId);
    data.append("parentObject", props.parentObject);
    //console.log(data);

    try {
      await Axios.post("http://localhost:5000/upload", data);
    } catch (err) {
      console.error(err.message);
    }
  };

  return (
    <form
      //  action="http://localhost:5000/upload"
      //  method="POST"
      //encType="multipart/form-data"
      onSubmit={handleSubmit}
    >
      <div className="row mb-3">
        <div className="col-lg-4">
          <label htmlFor="formFileMultiple" className="form-label mb-0">
            Add files
          </label>
          <input
            className="form-control"
            type="file"
            id="formFileMultiple"
            name="file"
            multiple
            onChange={onInputChange}
          />
        </div>
        <div className="col-lg-4 mt-0 gx-0">
          <button type="submit" className="btn btn-primary mt-4">
            Upload
          </button>
        </div>
      </div>
    </form>
  );
};

export default FileUpload;

====================================================================

Documents:

import React, { useState, useEffect } from "react";
import axios from "axios";

const Documents = (props) => {
  const parentDbId = props.parentDbId;

  const [documents, setDocuments] = useState([]);

  //mount
  useEffect(() => {
    console.log("first use effect");
    loadDocuments();
  }, []);

  const loadDocuments = async () => {
    const result = await axios.get(
      `http://localhost:5000/documents/${parentDbId}`
    );
    setDocuments(result.data);
  };

  return (
    <>
      <div className="row">
        {documents.map((document, index) => (
          <div className="col-lg-3" key={index}>
            <a href={document.filePath}>{document.fileName}</a>
          </div>
        ))}
      </div>
    </>
  );
};

export default Documents;

谢谢，吉米

【问题讨论】：

标签： reactjs siblings rerender

【解决方案1】：

很简单，只需拥有父控件文档状态并将状态和回调作为道具向下传递给子控件。现在兄弟姐妹正在引用相同的状态，并且会在道具（即文档状态）更改时重新渲染。父级还可以处理数据获取和上传。它看起来像这样：

const Parent = () => {
  const [documents, setDocuments] = useState([]);
  ...do data fetching here
  const handleSubmit = useCallback(async () => {}, []); // You might want to reset document state here?

  return (
    <div>
      <Docs documents={documents} />
      <Upload onUpload={setDocuments} onSubmit={handleSubmit} />
    </div>
  );
}

我想知道你是否真的应该有两个文档组件，一个用于显示正在上传的文件，一个用于显示已经上传的文件。您将在 Upload 组件中嵌入一个，而另一个将在每次 onUpload 完成时从 api 获取文档

【讨论】：