Question

我正在使用 useEffect 获取图像名称，然后我想用该状态更新另一个状态。当我查看控制台时，出现 404 错误：

http://localhost:8000/uploads/images/%7B%22options%22%3A%7B%22type%22%3A%22local%22%7D%7D

代码：

  useEffect(() => {
    const getAvatarImage = async () => {
      const response = await Axios.get(
        "http://localhost:8000/api/v1/users/get-avatar",
        { headers: { Authorization: "Bearer " + auth.token } }
      );
      setAvatar(response.data.avatar);
    };
    if (auth.token) getAvatarImage();
  }, [auth.token]);

 const [avatar, setAvatar] = useState();
  const [files, setFiles] = useState([
    {
      source: avatar,
      options: { type: "local" },
    },
  ]);

FilePond 组件然后使用文件来显示文件：

<FilePond
files={files}
instantUpload={false}
onupdatefiles={setFiles}
allowMultiple={false}
maxFiles={1}
server={{
  load: "http://localhost:8000/uploads/images/",
  process: {
    url: "http://localhost:8000/api/v1/users/update-avatar",
    ondata: (formData) => {
      formData.append("user", auth.userId);
      return formData;
    },
  },
}}
name="image"
labelIdle='Drag & Drop your files or <span class="filepond--label-action">Browse</span>'
/>

如果我将图像名称硬编码为“源”，则在文件状态下它按预期工作，但在我使用头像状态变量时不起作用，这让我认为这与我设置状态的方式有关.

如果有帮助，请链接到文档：

https://pqina.nl/filepond/docs/patterns/frameworks/react/

无法从状态加载初始值

0 个答案: