使用带数组参数的 useState 时，如何使用 useEffect 动态更新按钮？

Question

React 新手所以要温柔。我创建了一个文件上传器组件，并在 App.js 中添加了一个按钮，该按钮取决于上传文件的状态。如果没有文件上传，它会说“没有文件上传”。如果有文件上传，它会说“创建新项目”。我正在使用 useState 挂钩来设置我的项目信息：

const [newProjectInfo, setNewProjectInfo] = useState([documents: []});

import React, { useEffect, useRef, useState } from "react";
import FileUpload from "./components/file-upload/fileUpload";
import {
  //Custom components created with styled-components
  UploadToProjectContainer,
  CreateNewProjectBtn,
  NoFilesSelectedBtn
} from "./components/file-upload/fileUploadStyles";

function App() {

  const [newProjectInfo, setNewProjectInfo] = useState({
    documents: []
  });

  const updateUploadedFiles = (files) =>
    setNewProjectInfo({ ...newProjectInfo, documents: files});

  const handleSubmit = (event) => {
    event.preventDefault();
    //add logic to create a new project
  }

  return (
    <div>
      <form
        onSubmit={handleSubmit}
      >
        <FileUpload
          accept=".jpg,.png,.jpeg,.pdf,.doc,.gif,.bmp,.tiff,.svg,.dwg,.docx,.eps,.exe"
          label="File(s)"
          multiple
          updateFilesCb={updateUploadedFiles}
        />
        <UploadToProjectContainer>
          <button>
            Create New Project.
          </button>
        </UploadToProjectContainer>

      </form>
    </div>
  );

}


export default App;

如您所见，现在有一个静态的“创建新项目”按钮。我为每个要动态呈现的按钮创建了样式容器（请参阅：CreateNewProjectBtn 和 NoFilesSelectedBtn），但是我无法访问状态的道具来在上传文件时更改按钮。我知道我必须使用 useEffect 但是 newProjectInfo 的 document[] 道具是不可访问的——但这就是正在更新的内容。希望这是清楚的。如果我需要澄清，请告诉我。

Answer 1

我明白了，您想根据是否填充 newProjectInfo.documents 数组有条件地呈现不同的按钮文本。使用三元运算符检查 newProjectInfo.documents 数组是否具有真实的 length (non-zero) 属性以有条件地呈现一个字符串或另一个。

不需要为此使用 useEffect，更新状态将触发重新渲染。只需计算每个渲染周期显示的按钮文本。

示例：

<button>
  {newProjectInfo.documents.length ? "No files uploaded" : "Create New Project"}
</button>

使用带数组参数的 useState 时，如何使用 useEffect 动态更新按钮？

When using useState with an array argument, how do you use useEffect to update a button dynamically?

javascript

reactjs

react-hooks

use-effect

use-state