如何使用一个常见的 属性 和其他 JSON 对象来获得一个 JSON 中的特定 属性?
How to get a particular property of one JSON using one common property with other JSON objects?
我是 react.js 的新手,在执行以下任务时遇到问题。
当运行跟随代码时,它显示setState
无法使用并且应用程序中断。我有这两个对象,obj2
生成一个table3 columns
。我需要使 definition
列的每个单元格都不是 null
可点击的,然后将我带到 obj1
中存在的 team_wiki
link。
obj1: {
providers : [
{team_name : "XYZ", team_wiki : "https://example.com", team_id : 1},
{team_name : "ABC", team_wiki : "null", team_id : 2},
{team_name : "LMN", team_wiki : "https://example2.com", team_id : 3},
{team_name : "MNO", team_wiki : "https://example3.com", team_id : 4}
]
}
obj2: {
products : [
{team_name : "XYZ", definition : "this team handles XYZ products", metric_id : 101},
{team_name : "ABC", definition : "this team handles ABC products", metric_id : 201},
{team_name : "LMN", definition : "this team handles LMN products", metric_id : 301},
{team_name : "MNO", definition : "this team handles MNO products", metric_id : 401}
]
}
代码:
state = {
API_DATA : {},
TEAM_WIKI : ''
}
componentDidMount(){
// fetch the obj1 data and sets it to the state called API_DATA
}
wikiLink = (TEAM_NAME) {
// getting TEAM_NAME from a component inside the render method
const wiki = this.state.API_DATA.map(provider => {
if (provider.team_name = TEAM_NAME && provider.team_wiki !== null) {
return provider.team_wiki
}
})
.map(link => {
if (link !== undefined) {
return link
}
})
this.setState({
// TEAM_WIKI is a state { its a string } where i want to store the
//team_wiki at last
TEAM_WIKI : wiki
})
}
render() {
return (
// i want to use it something like this
< href="this.state.TEAM_WIKI" onClick={this.wikiLink(TEAM_NAME)} />
)
}
函数 wikiLink
不是 class 函数,未绑定到您的组件。您可以使用 es6 语法绑定 wikiLink 或将 wikiLink
绑定到您的组件。
或者使wikiLink
像
wikiLink = (TEAM_NAME) => { // rest of your code
或:
在你的 constructor
中,你会做类似
的事情
constructor(){
this.wikiLink = this.wikiLink.bind(this)
}
在您的 wikiLink 中,您似乎正在尝试使用 =>
箭头功能快捷方式?
您的 wikiLink 函数中遗漏了一些内容。你要么做
function wikilink (Data) {//rest of your code}
或者上面的回答是怎么说的。
我觉得当第一次渲染发生时,this.wikiLink
被 调用,而不是 作为参考传递 .为什么我这么认为?因为我在那里看到圆括号。此方法的主体包含对 this.setState
的调用,这意味着组件的状态在渲染时交换,这违反了组件生命周期。
考虑一个案例:
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
buttonClicked: false,
};
this.handleClickButton = this.handleClickButton.bind(this);
}
handleClickButton() {
this.setState({
buttonClicked: true,
});
}
render() {
return (
<button onClick={this.handleClickButton()}>click me</button>
);
}
}
有问题!表达式 this.handleClickButton()
是一个函数调用。其中,有一个状态改变指令。当代码试图这样做时,React 显示警告:
Warning: setState(...): Cannot update during an existing state transition
(such as within render
or another component's constructor). Render methods
should be a pure function of props and state; constructor side-effects are an anti-pattern,
but can be moved to componentWillMount
.
我们真正想要的是在单击按钮时调用函数 this.handleClickButton
。为此,我们需要将对此函数的引用传递给 onClick
属性,如下所示:
render() {
return (
<button onClick={this.handleClickButton}>click me</button>
);
}
注意没有圆括号。
那你该怎么办?
有两种选择:
选项 1:onClick 中的匿名函数
而不是写作
render() {
return (
// i want to use it something like this
<a href="this.state.TEAM_WIKI" onClick={this.wikiLink(TEAM_NAME)} />
);
}
做
render() {
return (
// i want to use it something like this
<a href="this.state.TEAM_WIKI" onClick={() => this.wikiLink(TEAM_NAME)} />
);
}
这样,每次调用组件实例的 render
方法时,都会传递对就地声明的匿名函数的引用。然后,当用户决定单击时,将在某个不可预测的时间点调用此函数,即调度 "click".
类型的 MouseEvent
选项 2:使 this.wikiLink(•) return 成为函数!
函数的概念 return 函数通常被称为部分应用,或者在与此类似的情况下,通常被称为 闭包 。所以 wikiLink
函数将代替这个:
wikiLink(TEAM_NAME) {
// getting TEAM_NAME from a component inside the render method
const wiki = this.state.API_DATA.map(provider => {
if ((provider.team_name = TEAM_NAME && provider.team_wiki !== null)) {
return provider.team_wiki;
}
}).map(link => {
if (link !== undefined) {
return link;
}
});
this.setState({
// TEAM_WIKI is a state { its a string } where i want to store the
//team_wiki at last
TEAM_WIKI: wiki
});
}
看起来像这样:
wikiLink(TEAM_NAME) {
return () => {
// getting TEAM_NAME from a component inside the render method
const wiki = this.state.API_DATA.map(provider => {
if ((provider.team_name = TEAM_NAME && provider.team_wiki !== null)) {
return provider.team_wiki;
}
}).map(link => {
if (link !== undefined) {
return link;
}
});
this.setState({
// TEAM_WIKI is a state { its a string } where i want to store the
//team_wiki at last
TEAM_WIKI: wiki
});
};
}
所以当它被调用时,它return是一个新函数。因为onClick
prop是期望接收一个函数,所以我们解决了类型匹配的问题。因为我们用一些参数 TEAM_NAME
调用 wikiLink
并且每次执行该函数时都会应用这个参数,所以我们解决了保留上下文的问题。是不是很厉害!
要更好地了解如何使用 return 是函数的函数,请查看 this Codesandbox,第 16 至 23 行。希望它会给出一些关于如何在以下情况下利用闭包的想法你需要管理 React 组件的状态。
干杯!
我是 react.js 的新手,在执行以下任务时遇到问题。
当运行跟随代码时,它显示setState
无法使用并且应用程序中断。我有这两个对象,obj2
生成一个table3 columns
。我需要使 definition
列的每个单元格都不是 null
可点击的,然后将我带到 obj1
中存在的 team_wiki
link。
obj1: {
providers : [
{team_name : "XYZ", team_wiki : "https://example.com", team_id : 1},
{team_name : "ABC", team_wiki : "null", team_id : 2},
{team_name : "LMN", team_wiki : "https://example2.com", team_id : 3},
{team_name : "MNO", team_wiki : "https://example3.com", team_id : 4}
]
}
obj2: {
products : [
{team_name : "XYZ", definition : "this team handles XYZ products", metric_id : 101},
{team_name : "ABC", definition : "this team handles ABC products", metric_id : 201},
{team_name : "LMN", definition : "this team handles LMN products", metric_id : 301},
{team_name : "MNO", definition : "this team handles MNO products", metric_id : 401}
]
}
代码:
state = {
API_DATA : {},
TEAM_WIKI : ''
}
componentDidMount(){
// fetch the obj1 data and sets it to the state called API_DATA
}
wikiLink = (TEAM_NAME) {
// getting TEAM_NAME from a component inside the render method
const wiki = this.state.API_DATA.map(provider => {
if (provider.team_name = TEAM_NAME && provider.team_wiki !== null) {
return provider.team_wiki
}
})
.map(link => {
if (link !== undefined) {
return link
}
})
this.setState({
// TEAM_WIKI is a state { its a string } where i want to store the
//team_wiki at last
TEAM_WIKI : wiki
})
}
render() {
return (
// i want to use it something like this
< href="this.state.TEAM_WIKI" onClick={this.wikiLink(TEAM_NAME)} />
)
}
函数 wikiLink
不是 class 函数,未绑定到您的组件。您可以使用 es6 语法绑定 wikiLink 或将 wikiLink
绑定到您的组件。
或者使wikiLink
像
wikiLink = (TEAM_NAME) => { // rest of your code
或:
在你的 constructor
中,你会做类似
constructor(){
this.wikiLink = this.wikiLink.bind(this)
}
在您的 wikiLink 中,您似乎正在尝试使用 =>
箭头功能快捷方式?
您的 wikiLink 函数中遗漏了一些内容。你要么做
function wikilink (Data) {//rest of your code}
或者上面的回答是怎么说的。
我觉得当第一次渲染发生时,this.wikiLink
被 调用,而不是 作为参考传递 .为什么我这么认为?因为我在那里看到圆括号。此方法的主体包含对 this.setState
的调用,这意味着组件的状态在渲染时交换,这违反了组件生命周期。
考虑一个案例:
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
buttonClicked: false,
};
this.handleClickButton = this.handleClickButton.bind(this);
}
handleClickButton() {
this.setState({
buttonClicked: true,
});
}
render() {
return (
<button onClick={this.handleClickButton()}>click me</button>
);
}
}
有问题!表达式 this.handleClickButton()
是一个函数调用。其中,有一个状态改变指令。当代码试图这样做时,React 显示警告:
Warning: setState(...): Cannot update during an existing state transition (such as within
render
or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved tocomponentWillMount
.
我们真正想要的是在单击按钮时调用函数 this.handleClickButton
。为此,我们需要将对此函数的引用传递给 onClick
属性,如下所示:
render() {
return (
<button onClick={this.handleClickButton}>click me</button>
);
}
注意没有圆括号。
那你该怎么办?
有两种选择:
选项 1:onClick 中的匿名函数
而不是写作
render() {
return (
// i want to use it something like this
<a href="this.state.TEAM_WIKI" onClick={this.wikiLink(TEAM_NAME)} />
);
}
做
render() {
return (
// i want to use it something like this
<a href="this.state.TEAM_WIKI" onClick={() => this.wikiLink(TEAM_NAME)} />
);
}
这样,每次调用组件实例的 render
方法时,都会传递对就地声明的匿名函数的引用。然后,当用户决定单击时,将在某个不可预测的时间点调用此函数,即调度 "click".
选项 2:使 this.wikiLink(•) return 成为函数!
函数的概念 return 函数通常被称为部分应用,或者在与此类似的情况下,通常被称为 闭包 。所以 wikiLink
函数将代替这个:
wikiLink(TEAM_NAME) {
// getting TEAM_NAME from a component inside the render method
const wiki = this.state.API_DATA.map(provider => {
if ((provider.team_name = TEAM_NAME && provider.team_wiki !== null)) {
return provider.team_wiki;
}
}).map(link => {
if (link !== undefined) {
return link;
}
});
this.setState({
// TEAM_WIKI is a state { its a string } where i want to store the
//team_wiki at last
TEAM_WIKI: wiki
});
}
看起来像这样:
wikiLink(TEAM_NAME) {
return () => {
// getting TEAM_NAME from a component inside the render method
const wiki = this.state.API_DATA.map(provider => {
if ((provider.team_name = TEAM_NAME && provider.team_wiki !== null)) {
return provider.team_wiki;
}
}).map(link => {
if (link !== undefined) {
return link;
}
});
this.setState({
// TEAM_WIKI is a state { its a string } where i want to store the
//team_wiki at last
TEAM_WIKI: wiki
});
};
}
所以当它被调用时,它return是一个新函数。因为onClick
prop是期望接收一个函数,所以我们解决了类型匹配的问题。因为我们用一些参数 TEAM_NAME
调用 wikiLink
并且每次执行该函数时都会应用这个参数,所以我们解决了保留上下文的问题。是不是很厉害!
要更好地了解如何使用 return 是函数的函数,请查看 this Codesandbox,第 16 至 23 行。希望它会给出一些关于如何在以下情况下利用闭包的想法你需要管理 React 组件的状态。
干杯!