如何在 ReactJS 中使用状态更新数组

Question

我有一个结果列表，每次单击结果时，它都会调用我的addFunc 函数将该特定结果的详细信息作为对象添加到selectedData 列表中。目前，这在我 console.log 我的 selectedData 列表时有效。

我想要做的是显示我的selectedData 列表，每次单击结果时，该对象都会添加到列表中，我希望它反映在我的屏幕上。

我相信我必须使用状态来执行此操作，但我不太确定如何操作。感谢您的帮助。

我的代码摘要如下：

let selectedData = [];

const Wrapper = cb => {
  return (res, triggerClickAnalytics) => (
    <RenderItem
      res={res}
      triggerClickAnalytics={triggerClickAnalytics}
      addFunc={cb}
    />
  );
};

class Search extends Component {
  constructor(props) {
    super(props);
    this.addFunc = this.addFunc.bind(this);
  }
  addFunc(resultdata) {
    selectedData = [...selectedData, resultdata]
    console.log(selectedData)
  }
render() {
    return (
          <ReactiveList
            componentId="results"
            dataField="_score"
            pagination={true}
            react={{
              and: ["system", "grouping", "unit", "search"]
            }}
            size={10}
            noResults="No results were found..."
            renderItem={Wrapper(this.addFunc)}
          />
        </ReactiveBase>
    );
  }
}

const RenderItem = ({ res, triggerClickAnalytics, addFunc }) => {

  let { unit, title, system, score, proposed, id } = {
    title: "maker_tag_name",
    proposed: "proposed_standard_format",
    unit: "units",
    system: "system",
    score: "_score",
    id: "_id"
  };
  const resultdata = { id, title, system, unit, score, proposed };

  return (
        <Button
          shape="circle"
          icon={<CheckOutlined />}
          style={{ marginRight: "5px" }}
          onClick={() => addFunc(resultdata)}
        />
  );
};

整个代码在这个代码沙箱中：https://codesandbox.io/s/little-framework-spg1w

编辑：

我已经设法通过编辑我的代码将我的函数更改为一个状态：

  constructor(props) {
    super(props);
    this.addFunc = this.addFunc.bind(this);
    this.state = { selectedData:[] }
  }
  addFunc(resultdata) {
    var joined = this.state.selectedData.concat(resultdata);
    this.setState({ selectedData: joined })
    console.log(joined)
  }

我现在需要在屏幕上显示我的joined 数组中的结果。我该怎么做？

Answer 1

将 Search.js 替换为

import React, { useState, Component } from "react";
import {
  ReactiveBase,
  DataSearch,
  MultiList,
  SelectedFilters,
  ReactiveList
} from "@appbaseio/reactivesearch";
import { Row, Button, Col } from "antd";
import { CheckOutlined } from "@ant-design/icons";

const Wrapper = cb => {
  return (res, triggerClickAnalytics) => (
    <RenderItem
      res={res}
      triggerClickAnalytics={triggerClickAnalytics}
      addFunc={cb}
    />
  );
};

class Search extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedData : []
    }
    this.addFunc = this.addFunc.bind(this);
  }
  addFunc(resultdata) {
    this.setState(prevState => ({selectedData: [...prevState.selectedData, resultdata]}))

  }
  render() {
    return (
      <div>
        <ReactiveBase
          app="datataglist"
          credentials="mRgWyoKGQ:f47be2a6-65d0-43b6-8aba-95dbd49eb882"
          url="https://scalr.api.appbase.io"
        >
          <DataSearch
            componentId="search"
            dataField={[
              "maker_tag_name",
              "maker_tag_name.autosuggest",
              "maker_tag_name.keyword"
            ]}
            fieldWeights={[6, 2, 6]}
            fuzziness={1}
            highlightField={["maker_tag_name"]}
            placeholder="Search Tag Name"
            style={{
              marginBottom: 20
            }}
            title="Maker Tag Name"
          />
          <Row gutter={16}>
            <Col span={8}>
              <MultiList
                componentId="system"
                dataField="system.keyword"
                queryFormat="or"
                size={100}
                sortBy="asc"
                style={{
                  marginBottom: 20
                }}
                title="System"
              />
            </Col>
            <Col span={8}>
              <MultiList
                componentId="grouping"
                dataField="grouping.keyword"
                size={100}
                style={{
                  marginBottom: 20
                }}
                title="Grouping"
              />
            </Col>
            <Col span={8}>
              <MultiList
                componentId="unit"
                dataField="units.keyword"
                size={100}
                style={{
                  marginBottom: 20
                }}
                title="Unit"
              />
            </Col>
          </Row>
          <SelectedFilters />
          <ReactiveList
            componentId="results"
            dataField="_score"
            pagination={true}
            react={{
              and: ["system", "grouping", "unit", "search"]
            }}
            size={10}
            noResults="No results were found..."
            renderItem={Wrapper(this.addFunc)}
          />
        </ReactiveBase>
        <div />
      </div>
    );
  }
}

function getNestedValue(obj, path) {
  const keys = path.split(".");
  const currentObject = obj;
  const nestedValue = keys.reduce((value, key) => {
    if (value) {
      return value[key];
    }
    return "";
  }, currentObject);
  if (typeof nestedValue === "object") {
    return JSON.stringify(nestedValue);
  }
  return nestedValue;
}

const RenderItem = ({ res, triggerClickAnalytics, addFunc }) => {
  // console.log(name);

  let { unit, title, system, score, proposed, id } = {
    title: "maker_tag_name",
    proposed: "proposed_standard_format",
    unit: "units",
    system: "system",
    score: "_score",
    id: "_id"
  };
  title = getNestedValue(res, title);
  system = getNestedValue(res, system);
  unit = getNestedValue(res, unit);
  score = getNestedValue(res, score);
  proposed = getNestedValue(res, proposed);
  id = getNestedValue(res, id);

  const resultdata = { id, title, system, unit, score, proposed };

  return (
    <Row
      onClick={triggerClickAnalytics}
      type="flex"
      gutter={16}
      key={res._id}
      style={{ margin: "20px auto", borderBottom: "1px solid #ededed" }}
    >
      <Col style={{ width: "360px" }}>
        <h3
          style={{ fontWeight: "600" }}
          dangerouslySetInnerHTML={{
            __html: title || "Choose a valid Title Field"
          }}
        />
      </Col>
      <div style={{ padding: "20px" }} />
      <Col>
        <p
          style={{ fontSize: "1em", width: "300px" }}
          dangerouslySetInnerHTML={{
            __html: system || "Choose a valid Description Field"
          }}
        />
      </Col>
      <div style={{ padding: "10px" }} />
      <Col>
        <p
          style={{ fontSize: "1em" }}
          dangerouslySetInnerHTML={{
            __html: unit || "-"
          }}
        />
      </Col>
      <div style={{ padding: "10px" }} />
      <Col style={{ minWidth: "120px" }}>
        <p
          style={{ fontSize: "1em", width: "300px" }}
          dangerouslySetInnerHTML={{
            __html: proposed || "Choose a valid Description Field"
          }}
        />
      </Col>
      <div style={{ padding: "10px" }} />
      <Col>
        <p
          style={{ fontSize: "1em" }}
          dangerouslySetInnerHTML={{
            __html: Math.round(score) || "Choose a valid Description Field"
          }}
        />
      </Col>
      <Col>
        <Button
          shape="circle"
          icon={<CheckOutlined />}
          style={{ marginRight: "5px" }}
          onClick={() => addFunc(resultdata)}
        />
      </Col>
    </Row>
  );
};

export default Search;