如何更新反应 state

Question

I have a list of results from my search output. Each result has an onclick function. I want to display each of the results that the user clicks, and for now I can add each result that the user clicks to an array using this function:

let selectedData = []

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

I'm new to React, but I know this isn't the right way and I might have to use states or react hooks. The problem is that because I am using Elasticsearch to output the results, my results are in a function, not the main class. Like this:

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>
      );
  }

Basically, my ReactiveList component is what shows the results. This calls the RenderItem function, which is what displays the data on the screen. In my function, I have a list called resultdata , which contains all the data I need when each result is clicked on. This works, but I need it to display on the screen.

I can't use state, because I have a function. And I can't use hooks because it isn't the main function. Am I doing something wrong? Is there any other alternative to this?

Even if you can't provide a complete answer, I would appreciate any tips on which direction I should look towards.

Answer 1

state is async so it wont update like this:

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

and you are using a class so you can't useHooks but setState takes a callback as second argument

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

so if you continue using a Class approach this will allow you to use setState and utilize the callback in it

there is a callback available too in hooks but it doesn't work quite the same

Answer 2

Place addFunc within the parent component and make your RenderItem function a React Functional component by exporting it. Then provide the addFunc as a function prop from parent component to RenderItem component. That way you can call the function within onClick event. Any of the parent states can be updated from the addFunc. You can supply necessary arguments to the function call as well.