Question

当使用FileReader API选择上传文件时，我试图在React / Redux应用程序中显示一些文件内容。我能够显示内容，但在FileReader的onload事件处理程序中调用setState会导致无限渲染。

import _ from 'lodash';
import React, { Component } from 'react';
import { reduxForm, Field, formValueSelector } from 'redux-form';
import Button from 'material-ui/Button';
import * as actions from '../../actions';
import { connect } from 'react-redux';
import {
  Select,
  TextField,
} from 'redux-form-material-ui';

import { renderFileInput } from '../helpers/form_helpers';

class ImportLeads extends Component {
  state = {
    fields: []
  }

  handleFormSubmit({ leadsCSV }) {
    const { listid } = this.props;
    this.props.importLeads(leadsCSV, listid);
  }

  renderMapping() {
    const { CSVFile } = this.props;
    console.log(CSVFile);
    const temp = [];

    if(CSVFile) {
      const r = new FileReader();
      r.readAsText(CSVFile, "UTF-8");
      r.onload = (e) => {
        const content = e.target.result;
        const firstLine = content.split('\n', 1)[0];
        const fieldsArray = firstLine.split(',');
        console.log(fieldsArray);
        _.map(fieldsArray, field => {
          console.log(field);
          temp.push(<div>{field}</div>);
        });
        this.setState({ fields: temp });
      }
      r.onerror = function(e) {
        console.log("Error reading file");
      }
    }

    return (
      <div>
        {this.state.fields}
      </div>
    );
  }

  render() {
    const { handleSubmit } = this.props;

    return (
      <div>
        <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
          <div>

            <Field
              name="leadsCSV"
              component={renderFileInput}
              type="file"
              text="Import CSV"
            />

            <div style={{ marginTop: '10px' }}>
              <Button type="submit" variant="raised">Upload</Button>
            </div>
          </div>
        </form>
        {this.renderMapping()}
      </div>
    );
  }
}

ImportLeads = reduxForm({
  form: 'importLeads',
})(ImportLeads);

const selector = formValueSelector('importLeads');
ImportLeads = connect(
  state => {
    const CSVFile = selector(state, 'leadsCSV');
    return {
      CSVFile
    }
  }
)(ImportLeads);

export default ImportLeads;

我使用redux表单来处理文件输入并通过使用connect将其作为道具提供来获取文件的值。

我读到在render方法中调用setState时通常会发生无限渲染。有没有更好的方法来解决这个问题，而不是让它无限渲染？感谢。

Answer 1

在renderMapping()内，您调用setState导致重新渲染组件。

在组件render中，您{this.renderMapping()}导致再次呼叫renderMapping。

此过程重复n次，导致无限渲染。

Answer 2

如果renderMapping已包含fieldsArray，您应该检查field。如果是这样，则不应将其推送到阵列。（因为你正在将另一个div中的相同字段推入到数组中，它会不断地重新渲染）

if (fieldsArray.includes(field)) {
  return;
}

Answer 3

React有一些特殊的“生命周期”方法，对这个用例非常有用。

如果定义componentWillMount()方法，则会在第一次渲染之前调用它。如果你有额外的资源需要加载，你可以在那里开始。

由于看起来你想重新运行那些计算，如果道具发生变化，你也会想要使用componentWillReceiveProps(nextProps)根据新的道具重新运行你的计算。请注意this.props尚未反映新道具，您需要从参数中获取这些道具。

最后，虽然您的案例不必要，但您应该使用componentWillUnmount()熟悉自己（这将允许您自己清理（例如删除事件监听器，取消计时器等），如果您不这样做，您可以轻松导致内存泄漏甚至更糟。

您可以在文档中熟悉更多生命周期方法：https://reactjs.org/docs/react-component.html#the-component-lifecycle

最后一个示例，演示如何使用这些方法解决类似“解析”换行符分隔列表的问题。

class Table extends React.Component {
    constructor() {
      super();
      this.state = {
        rows: []
      };
    }

    componentWillMount() {
      this.parse(this.props.string);
    }

    componentWillReceiveProps(nextProps) {
      this.parse(nextProps.string);
      
    }

    parse(string) {
      // Dummy placeholder for asynchronous operation
      this.setState({
        rows: string.split("\n")
      });
    }

    render() {
      return (
        <ul>
          { this.state.rows.map((row) => <li>{row}</li>) }
        </ul>
      );
    }
}

class Sample extends React.Component {
  constructor() {
    super();
    this.state = { string: "hello world\ngoodbye world" };
  }
  
  render() {
    return (<div>
      <Table string={this.state.string} />
      <textarea onChange={(event) => this.setState({ string: event.target.value })} value={this.state.string} />
    </div>);
  }
}

ReactDOM.render(<Sample /> , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

在上传

3 个答案: