问题描述
我有一个结果列表,每当我单击一个结果时,它就会调用我的addFunc
函数,以将该特定结果的详细信息添加为selectedData
列表中的对象.目前,这在我console.log
我的selectedData
列表时有效.
I have a list of results, and each time I click on a result, it calls my addFunc
function to add that particular result's details as an object in the selectedData
list. Currently, this works when I console.log
my selectedData
list.
我想要做的是显示我的selectedData
列表,每次单击结果时,该对象将被添加到列表中,并且我希望该对象能够反映在我的屏幕上.
What I want to do is display my selectedData
list, and each time a result is clicked, the object will be added to the list, and I want that to be reflected on my screen.
我相信我必须使用状态来执行此操作,但是我不太确定该怎么做.谢谢您的帮助.
I believe I have to use state to do this, but I am not very sure how to. Thank you for your help.
我的代码摘要如下:
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
The whole code is in this code sandbox: https://codesandbox.io/s/little-framework-spg1w
我已经设法通过编辑代码来将功能更改为一种状态:
I've managed to change my function to a state by editing my code as such:
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
数组中显示结果.我该怎么办?
I now need to display the results in my joined
array on the screen. How do I do this?
推荐答案
将Search.js替换为
Replace Search.js with
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;
这篇关于如何在ReactJS中使用状态更新数组的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!