React组件未使用地图功能渲染

Question

调用loadAll（）时，不会渲染我的LinkItem组件。 仅在调用handleClick（）或handleChange（）之后才呈现它。

import React, { Component } from "react";
var Datastore = require("nedb");
var db = new Datastore({ filename: __dirname + "/userdata" });
db.loadDatabase(function(err) {

});

function LinkItem(props) {
  console.log("Rendered");
  return (
    <div>
      <a href={props.name}>{props.name}</a>
    </div>
  );
}

export default class List extends Component {
  constructor(props) {
    super(props);
    this.state = {
      link: "",
      data: [],
    };
    this.handleClick = this.handleClick.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.loadAll = this.loadAll.bind(this);
  }

  loadAll() {
    let loadData = [];
    db.find({ type: "link" }, function(err, docs) {
      docs.map(doc => loadData.push(doc.name));
    });
    this.setState({ data: loadData });
  }

  // add new item to data set
  handleClick() {
    this.setState({
      data: [...this.state.data, this.state.link]
    });
    const doc = { name: this.state.link, type: "link" };
    db.insert(doc, (err, docs) => {
      console.log("Inserted");
      console.log(docs);
    });
  }

  // handles form input changes
  handleChange(event) {
    this.setState({ link: event.target.value });
  }

在渲染功能中，我使用地图来渲染每个LinkItem组件。 但是，当我在LinkItem组件上检查console.log时，根本不会创建它们。 它们仅在handleClick和调用handleChange时出现。

  render() {
    const data = this.state.data;

      return (
        <div>
          <button onClick={this.loadAll}>Load data</button>
          <input
            type="text"
            value={this.state.link}
            onChange={this.handleChange}
          />
          <button onClick={this.handleClick}>Add</button>
          {console.log(data)}
          {/* render each data */}
          {data.map((item, index) => (
            <LinkItem name={item} key={index} />
          ))}
        </div>
      );
    }

}

基本上，我想发生的是调用loadData时，所有数据都在LinkItem组件中呈现。

注意：这不是重复项。 我检查了stackoverflow中的其他问题，这些问题在map函数中没有返回。 对我来说不是这样。 仅当其他状态值更改时，它才最终呈现。

编辑：我能够通过将setState放在db find中并将回调更改为箭头函数来修复它。 对于使用nedb进行响应的您可能会有所帮助。

  loadAll() {
    db.find({ type: "link" }, (err, docs) => { // changed to arrow function
      this.setState({ data: docs.map(doc => doc.name)});
    });
  } 

Answer 1

您的db.find函数是异步的，您的程序将继续运行，而不必等待它完成：

  loadAll() {
    let loadData = [];
    db.find({ type: "link" }, function(err, docs) {
      docs.map(doc => loadData.push(doc.name));
    });
    this.setState({ data: loadData });
  }

您有2个解决方案来修复它。

将setState放入回调中：

  loadAll() {
    let loadData = [];
    db.find({ type: "link" }, function(err, docs) {
      docs.map(doc => loadData.push(doc.name));
      this.setState({ data: loadData });
    });
  }

或等待您的来电：

  loadAll = async() => {
    let loadData = [];
    const docs = await db.find({ type: "link" });
    docs.map(doc => loadData.push(doc.name));
    this.setState({ data: loadData });
  }

同样，map函数将返回一个包含您的值的新数组。 以下语法较短，并且具有相同的作用：

loadAll = async () => {
    this.setState({ 
        data: (await db.find({ type: "link" })).map(doc => doc.name)
    });
}

我还注意到您在setState中使用状态值。 React建议在回调中使用您之前的状态来避免意外行为：

handleClick() {
    this.setState(prevState => {
        data: [...prevState.data, prevState.link]
    });

您可以使用的另一种方法是解构，此代码：

const data = this.state.data;

可能成为：

const { data } = this.state;

Answer 2

检索文档后 ，您需要在回调中调用setState ：

码

loadAll() {
  let loadData = [];
  db.find({ type: "link" }, function(err, docs) {
    docs.map(doc => loadData.push(doc.name));
    this.setState({ data: loadData });
  });
} 

或者只是做：

loadAll() {
  db.find({ type: "link" }, function(err, docs) {
    this.setState({ data: docs.map(doc => doc.name)});
  });
} 

这样做的原因是因为db.find是一个异步函数 ，所以它将立即返回，因此loadData将等于[] 。

您还可以将loadAll声明为async并使用await ：

loadAll() {
  const docs = await db.find({ type: "link" });
  this.setState({ data: docs.map(doc => doc.name) });
}

顺便说一下，有一些技巧可以使您的代码更短：

1. 使用对象分解语法
2. 将函数声明为箭头函数 ，这样，如果您直接在类内部创建state则可以摆脱构造函数

最终代码将如下所示：

最终代码

import React, { Component } from "react";

var Datastore = require("nedb");
var db = new Datastore({ filename: __dirname + "/userdata" });
db.loadDatabase(function(err) {

});

function LinkItem(props) {
    console.log("Rendered");
    return (
        <div>
            <a href={props.name}>{props.name}</a>
        </div>
    );
}

export default class List extends Component {
    state = {
        link: "",
        data: [],
    }

    loadAll = async () => {
        const docs = await db.find({ type: "link" });
        this.setState({ data: docs.map(doc => doc.name) });
    }

    // add new item to data set
    handleClick = () => {
        const { data, link } = this.state;

        this.setState({
            data: [...data, link]
        });

        const doc = { name: this.state.link, type: "link" };

        db.insert(doc, (err, docs) => {
            console.log("Inserted");
            console.log(docs);
        });
    }

    // handles form input changes
    handleChange = (event) => {
        this.setState({ link: event.target.value });
    }

    render() {
        const { data } = this.state;

        return (
            <div>
                <button onClick={this.loadAll}>Load data</button>
                    <input
                    type="text"
                    value={this.state.link}
                    onChange={this.handleChange}
                    />
                <button onClick={this.handleClick}>Add</button>

                {console.log(data)}
                {/* render each data */}

                {data.map((item, index) => (
                    <LinkItem name={item} key={index} />
                ))}
            </div>
        );
    }
}

请注意，无需将render声明为箭头函数，因为render 由React自动绑定 。

让我知道这是否可行，否则，请告诉我出了什么问题。