Javascript 如何更新反应状态

我有一个搜索结果列表。每个结果都有一个

onclick

函数。我想显示用户单击的每个结果，现在我可以使用此函数将用户单击的每个结果添加到数组中：

let selectedData = []

function addFunc(resultdata){
    console.log(resultdata)
    selectedData = [...selectedData, resultdata]
    console.log(selectedData)
  };

我是新手，但我知道这不是正确的方法，我可能必须使用状态或React挂钩。问题在于，因为我使用的是

Elasticsearch

来输出结果，所以我的结果是在一个函数中，而不是在主类中。像这样：

class Search extends Component {
    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={RenderItem}
                     />
          </ReactiveBase>
          <div>
          </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;
  }


  function RenderItem(res, triggerClickAnalytics) {
    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>
      );
  }

类搜索扩展组件{
render（）{
返回(
);
}
}
函数getNestedValue（对象，路径）{
常量键=路径分割（“.”）；
const currentObject=obj；
const nestedValue=键。reduce（（值，键）=>{
如果（值）{
返回值[键]；
}
返回“”；
}，当前对象）；
if（嵌套值的类型==“对象”）{
返回JSON.stringify（nestedValue）；
}
返回嵌套值；
}
函数RenderItem（res、triggerClickAnalytics）{
设{单元、标题、系统、分数、提议的id}={
标题：“制造商标签名称”，
提议：“提议的标准格式”，
单位：“单位”，
系统：“系统”，
分数：“_分数”，
id:“\u id”
};
title=getNestedValue（res，title）；
系统=getNestedValue（res，系统）；
单位=getNestedValue（res，单位）；
分数=getNestedValue（res，分数）；
建议=getNestedValue（res，建议）；
id=getNestedValue（res，id）；
const resultdata={id，title，system，unit，score，provided}
返回(




{addFunc（resultdata）}
/>
);
}

基本上，我的

ReactiveList

组件就是显示结果的组件。这将调用

RenderItem

函数，该函数在屏幕上显示数据。在我的函数中，我有一个名为

resultdata

的列表，其中包含单击每个结果时所需的所有数据。这是可行的，但我需要它显示在屏幕上

我不能使用state，因为我有一个函数。我不能使用钩子，因为它不是主函数。我做错什么了吗？除此之外还有其他选择吗

---

即使你不能提供一个完整的答案，我也希望你能告诉我应该朝哪个方向发展

状态是异步的，因此不会像这样更新：

function addFunc(resultdata){
    console.log(resultdata)
    selectedData = [...selectedData, resultdata]
    console.log(selectedData)
  };

您正在使用一个类，因此不能

useHooks

，但

setState

将回调作为第二个参数

function addFunc(resultdata){
    console.log(resultdata)
    this.setState({selectedData: [...selectedData, resultdata]}, () => console.log(selectedData))
  };

因此，如果您继续使用

类

方法，这将允许您使用

设置状态

并利用其中的回调

---

hooks中也有一个回调函数，但它的工作原理并不完全相同

将addFunc放在父组件中，并通过导出将RenderItem函数设置为React函数组件。然后提供addFunc作为父组件到RenderItem组件的函数属性。这样，您就可以在onClick事件中调用函数。可以从addFunc更新任何父状态。您还可以为函数调用提供必要的参数。

如何在屏幕上显示信息并让其更新？现在，它显示在控制台上，但我无法在屏幕上显示它。@Webco具体来说，您想显示什么？用户单击的每个结果的列表（

）。每次用户在控制台中单击时，都会向列表中添加一个带有“id、标题、单位等”的新对象。我想在屏幕上显示这些数据。目前，显示任何内容都很好，比如每个选定结果的“id”。您需要映射到已设置的状态。重点是将状态正确设置为数组。然后执行

this.state.myState.map（（item）=>{item}）

这个问题，因为我的函数在类之外，所以我不能使用

this

调用它。如果可以的话，你能告诉我在我的课堂上写些什么，这样我就可以使用状态了吗？只是改变我的功能不起作用。如果要求不太高，你能告诉我更多的细节吗？如何将功能更改为功能组件？如何添加功能道具

constructor（props）{super（props）；this.addFunc=this.addFunc.bind（this）；}

。我错过了什么？