React setState不是添加JSON时的函数？

Question

我试图使用共享祖先在文件上传程序和表之间中继数据。我有一个文件上传程序，但一旦我添加了JSON文件，我就会收到错误TypeError:setProductState不是一个函数。

当我将inputJson文件记录到控制台中时，它会运行，但当我应用setProductState并输入我的文件时，我会收到此错误。

根据我所读到的，我不需要绑定，因为我使用箭头语法，但我可能需要一个“this”。

• this.setState不是一个函数
  
• 如何在回调中访问正确的'this'

欢迎提出任何想法或批评。

function FileUploader({ productState, setProductState }) {

  const onDrop = useCallback((acceptedFiles) => {
   // this.setProductState = this.setProductState.bind(this); tried
    acceptedFiles.forEach((file) => {
      const reader = new FileReader()
      reader.onload  = () => {
        const inputJson =
          this.inputJson = inputJson //tried
          JSON.parse(reader.result)
          setProductState(inputJson); //console.log goes through
        }
      reader.readAsText(file)
    })

  }, [])
  const {getRootProps, getInputProps} = useDropzone({onDrop})

  return (
    <div {...getRootProps({style})}>
      <input {...getInputProps()} value={productState}/>
      <p>Drag files here, or click to browse</p>
    </div>
  )
}

祖先.js

import React, { useState } from 'react'
import FileUploader from './FileUploader'
import Table from './Table'

const Ancestor = () => {
    const [products, setProducts] = useState({});
    return <>
      <FileUploader productState={products} setProductState={setProducts} />
      <Table productState={products} />
    </>;
  }

export default Ancestor;

Answer 1

我相信您可能会对这个关键字的工作原理感到困惑。在FileUploader组件中，这将是对FileUploader的引用，而不是对祖先的引用。

您不需要引用Ancestor，因为您正在将产品和setProducts作为道具传递。这才是正确的做法。

此外，您可能不打算在接受文件上做一个foreach，因为您似乎只需要一个文件，对吗？

试试这个。

function FileUploader(props) {
  // Define an onDrop function to handle drop events
  const onDrop = useCallback((acceptedFiles) => {
    // Get the first file in the list of acceptedFiles
    const file = acceptedFiles[0];

    // Create a FileReader
    const reader = new FileReader();

    // Create a function to handle the reader onload event
    reader.onload = () => {
      // JSON parse the result from read as text
      let parsed = JSON.parse(reader.result);
      // Call the setProductState function from Ancestor component
      props.setProductState(parsed);
    };

    // Read the file, triggering the onload event handler
    reader.readAsText(file);
  }, []);

  const { getRootProps, getInputProps } = useDropzone({ onDrop });

  return (
    <div {...getRootProps({ style })}>
      <input {...getInputProps()} value={props.productState} />
      <p>Drag files here, or click to browse</p>
    </div>
  );
}