使用react-dropzone和nextjs - 輸入類型為“file”的多個屬性在服務器渲染時卡在false上，如何將其設置為true？

Question

我在nextjs項目上使用react-dropzone，目前當我在服務器上渲染一個dropzone組件時，我得到了錯誤：

“index.js：2178警告：支持multiple不匹配。服務器：”false“客戶端：”true“

我已嘗試在組件上設置multiple = {true}但沒有運氣。 但是，當我在組件上設置multiple = {false}時，客戶端渲染工作正常但已禁用多文件上載（如預期的那樣）

關於為什么它不能使用多個= {true}進行完整服務器渲染的任何想法？

React，NextJS項目與react-dropzone

嘗試在組件上設置multiple = {true}。 嘗試重建項目。

設置multiple = {false}有效但禁用所需的功能。

<Dropzone multiple={true} onDrop={this.onDrop}>
  {({ getRootProps, getInputProps }) => (
    <StyledDropzone>
      <DropPoint {...getRootProps()}>
        <input {...getInputProps()} />
        <p>Drag and drop some images to upload</p>
      </DropPoint>
      <FilePreviewer>
        <Thumbs>{thumbs}</Thumbs>
      </FilePreviewer>
    </StyledDropzone>
  )}
</Dropzone>

Answer 1

對於SSR，將其設置為本機元素：

<input {...getInputProps()} multiple />