这是具有状态(值和项)的父组件。我试图将值状态作为道具传递给子组件。当我点击按钮时,在render方法中执行的代码正在执行切换。但当我调用componentDidMount中的list函数时,切换不起作用,但执行了click事件。
import React, { Component } from 'react'
import Card from './Components/Card/Card'
export class App extends Component {
state = {
values : new Array(4).fill(false),
item : [],
}
toggleHandler = (index) => {
console.log("CLICKED");
let stateObject = this.state.values;
stateObject.splice(index,1,!this.state.values[index]);
this.setState({ values: stateObject });
}
list = () => {
const listItem = this.state.values.map((data, index) => {
return <Card key = {index}
show = {this.state.values[index]}
toggleHandler = {() => this.toggleHandler(index)} />
})
this.setState({ item : listItem });
}
componentDidMount(){
// if this is not executed as the JSX is render method is executed everything is working fine. as props are getting update in child component.
this.list();
}
render() {
return (
<div>
{/* {this.state.values.map((data, index) => {
return <Card key = {index}
show = {this.state.values[index]}
toggleHandler = {() => this.toggleHandler(index)} />
})
} */}
{this.state.item}
</div>
)
}
}
export default App
这是我的子组件,其中状态作为道具传递
import React from 'react'
const Card = (props) => {
return (
<div>
<section>
<h1>Name : John Doe</h1>
<h3>Age : 20 </h3>
</section>
{props.show ?
<section>Skills : good at nothing</section> : null
}
<button onClick={props.toggleHandler} >Toggle</button>
</div>
)
}
export default Card
我知道组件didmount只执行一次。但是除了在render方法中直接编写JSX之外,如何使它工作呢
值应该映射在类组件的渲染()
中,以便工作
这样地:
render() {
const { values } = this.state;
return (
<div>
{values.map((data, index) => {
return (
<Card
key={index}
show={values[index]}
toggleHandler={() => this.toggleHandler(index)}
/>
);
})}
</div>
);
}
检查沙箱进行演示
https://codesandbox.io/s/stupefied-spence-67p4f?file=/src/App.js
制作状态的副本,而不是直接对其进行变异。通过使用[…this.state.values]或此。状态价值观切片()
toggleHandler = (index) => {
console.log("CLICKED");
let stateObject = [...this.state.values]
stateObject = stateObject.filter((_, i) => i !== index);
this.setState({ values: stateObject });
}
同样在你的渲染方法中,this.state.item是一个数组,所以你需要循环它
{this.state.item.map(Element => <Element />}
也直接在你的渲染方法,你可以只做
{this.state.values.map((data, index) => {
return <Card key = {index}
show = {this.state.values[index]}
toggleHandler = {() => this.toggleHandler(index)} />
})}
在您的卡组件中尝试使用
<button onClick={() => props.toggleHandler()}} >Toggle</button>
我正在做一个React-Native项目,我意识到React-Native似乎打破了React-flow(父到子)道具更新。 基本上,我是从“应用程序”组件调用“菜单”组件,将一个道具传递给“菜单”。然而,当我更新“应用程序”状态时,“菜单”上的道具应该更新,但这不会发生。我做错什么了吗? 这是我的密码: 一个pp.js 菜单js
我有一个React应用程序,其中来自父组件的道具被传递到子组件,然后道具设置子组件的状态。 如何让它更新子组件上的状态? 我的精简代码:
我有一个父组件从API获取一些数据,并将数据存储在状态中,然后将其传递给子组件,如下所示: 在我的子组件中,我有两个问题,一个是:我想在componentDidMount中接收一个道具(ratingsAverage),但在render()函数中接收ratingsAverage时未定义。另一个是:在我的render()函数中,我只能接收非对象或数组的数据,当我接收到一个对象并希望访问该对象的属性时,
我有以下结构: ChildComponent只是呈现值:
我对JS的反应有点陌生。我有两个问题。我来了 现在我要做的是,当应用程序组件挂载时,我生成一个对后端服务器的ajax调用,当它返回时,它更新道具,并设置状态,这样子组件也会重新呈现,但子组件不会重新呈现。谁能告诉我出了什么问题。 问题2 现在让我们假设我将进入组件二路由,它将呈现组件二,我在应用程序组件中生成一个ajax调用,根据ajax调用返回的数据,我在应用程序组件中设置了一些道具,我还希望组
我得到这个错误 食品项插入失败无法添加或更新子行:外键约束失败(.,约束外键()在更新级联上引用() 我试图以一种形式将食谱添加到我的数据库中。我希望输入的数据到3个不同的表。配料表、配方表和recipe_compridient表。recipe表中有一个自动增量id作为主键,而配料id作为recipe表中的外键。 我想要配料名称,数据到配料表和名称,课程,指令到配方表加上配料表中的配料ID 要转到