Question

https://github.com/itachiRedhair/react-dropzone-csv-to-json

使用该库，出现此错误。

index.js：1452警告：React无法识别DOM元素上的getJson道具。如果您有意让它作为自定义属性出现在DOM中，请将其拼写为小写getjson。如果您不小心从父组件传递了它，请将其从DOM元素中删除。

我导入的内容如下所示，

import React, { Component } from "react";
import Dropzone from "react-dropzone";
import csv from "csvtojson";

export default class ModifiedDropZone extends Component {
  state = {
    files: []
  };

  onDrop = (acceptedFiles, rejectedFiles) => {
    this.setState({
      files: acceptedFiles
    });

    acceptedFiles.forEach(file => {
      const reader = new FileReader();

      reader.onload = () => {
        const fileAsBinaryString = reader.result;

        csv({
          noheader: true,
          output: "json"
        })
          .fromString(fileAsBinaryString)
          .then(csvRows => {
            const toJson = [];
            csvRows.forEach((aCsvRow, i) => {
              if (i !== 0) {
                const builtObject = {};

                Object.keys(aCsvRow).forEach(aKey => {
                  const valueToAddInBuiltObject = aCsvRow[aKey];
                  const keyToAddInBuiltObject = csvRows[0][aKey];
                  builtObject[keyToAddInBuiltObject] = valueToAddInBuiltObject;
                });

                toJson.push(builtObject);
              }
            });

            const { getJson } = this.props;
            getJson(toJson);
          });
      };

      reader.onabort = () => console.log("file reading was aborted");
      reader.onerror = () => console.log("file reading has failed");

      reader.readAsBinaryString(file);
    });
  };

  render() {
    const { children } = this.props;
    return (
      <Dropzone onDrop={this.onDrop} {...this.props}>
        {children}
      </Dropzone>
    );
  }
}

并像这样使用该组件

import React, { Component } from "react";
import { DropZone } from "../lib";

class App extends Component {
  state = {
    jsonResult: null
  };

  render() {
    return (
      <div style={{ width: 640, margin: "15px auto" }}>
        <div>
          <DropZone
            getJson={jsonResult => {
              this.setState({ jsonResult });
            }}
          >
            <p>Add a file and see for yourself</p>
          </DropZone>
          {this.state.jsonResult ? (
            <div>{JSON.stringify(this.state.jsonResult)}</div>
          ) : null}
        </div>
      </div>
    );
  }
}

export default App;

在我看来，问题是，react不知道DropZone中的getJson，但是我不知道这里有什么错误。这是我的第一个反应试验，所以我不知道如何处理。

有什么想法吗？在安装纱头并开始纱头后，您会看到此警告

Answer 1

通过消除{...this.props}删除了此警告。问题是Custmized DropZone组件提供了imported Child DropZone Component没有的道具。

React无法识别DOM元素上的`getJson`属性

1 个答案: