gpt4 book ai didi

javascript - ReactJS - 子组件在使用导入组件时不会渲染,但在父元素中显式标记时会渲染

转载 作者:行者123 更新时间:2023-11-28 04:10:50 25 4
gpt4 key购买 nike

我正在为 freeCodeCamp.org 项目构建一个投票应用程序。

每个民意调查都有一个投票选项列表。

在一次民意调查中,我试图呈现所有可用的选项进行投票。

直接在投票组件中标记投票选项是可行的,但当我将标记分解到“选项”子组件时则不起作用。

在react dev-tools中,出现了一个connect标签,但没有DIV,这让我认为我处理渲染的方式都是错误的。

图像 Child component does not render (via React Dev Tools)

a_poll.js(父组件)

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PollOption from './poll_option';
import * as Actions from '../actions';

class APoll extends Component {

componentDidMount() {
this.props.fetchAPoll(this.props.params.postId);
}

renderOption(pollData) {
//console.log("renderOption:", pollData.options);
return (
pollData.options.forEach(function(option) {
return (
<PollOption title={option.title} value={option.value} />
);
})
);
}

render() {
const a_poll = this.props.a_poll ? this.props.a_poll : "nothing here";
return (
<div>
<div>{ a_poll.title } : {a_poll.user_name}</div>
<div>{a_poll.map(this.renderOption)}</div>
</div>
);
}

};

function mapStateToProps({a_poll}) {
return {
a_poll
};
}

export default connect(mapStateToProps, Actions)(aPoll);

PollOption.js(子组件)

import { connect } from 'react-redux';
import * as Actions from '../actions';

function PollOption(props) {

return (
<div key={ this.props.title } style={{ clear: 'left' }}>
<h6>{ this.props.title }hgjgjg : </h6>
<div style={{marginTop : "5px"}}>
<div style={{
display: "inline-black",
float: "left",
backgroundColor : "cornflowerblue",
height : "50",
padding : "15",
marginBottom : "15px",
minWidth: "50px",
width : option.value,
color: "white",
lineHeight: "25px"
}}>
<div style={{
display : "inline-block",
}}>
{ this.props.value }
</div>
</div>
<button
style={{
display: "inline-block",
height: "50",
marginLeft: "20",
}}
className="btn btn-primary"
onClick={console.log("vote buttoned clicked")}
>
Vote
</button>
</div>
</div>
);
}

export default connect(Actions)(PollOption);

最佳答案

我将用简单的语法来标记它并跳过大部分代码。问题是您实际上并没有更新内容,因此当状态发生变化时,没有任何内容可以更新。

这是一个您可以测试的简单组件,它可能会解释您的问题:

//测试.js

import React from 'react'

let counter = 0
class TestPage extends React.Component {
constructor() {
super()
this.state = {
data: []
}
}

componentDidMount() {
this.setState({
data: [
'a','b','c'
]
})
}

badAddToState() {
this.state.data.push(('bad' + counter++))
}

addToState() {
let copy = this.state.data.slice() //make a new array
copy.push('good' + counter++)
let newState = Object.assign({}, this.state, {
data: copy
})
this.setState(newState)
}
render() {
const { data } = this.state || { data: [] } //ES6 destructuring syntax
return (
<div>
<button
onClick = { (e) => {
this.badAddToState()
console.log('bad clicked')
console.log('counter->' + counter)
} }
>
BAD
</button>
<button
onClick = { (e) => {
this.addToState()
console.log('good clicked')
console.log('counter->' + counter)
} }
>
GOOD
</button>
<h1>Good data</h1>
{ this.state.data.map( (x) => {
return (<div key={x}>Hi I'm {x}</div>) //this is effectively your child
})}
</div>

)
}
}
export default TestPage

所以这是怎么回事?基本上,“BAD”按钮正在更新您的状态,但不会告诉组件它已经修改了状态。 “GOOD”按钮使用 setState 方法将数据推送回组件,表示“嘿,我需要更新”(您可以看到它实际上产生了结果,但组件没有更新。)

enter image description here

那么我为什么给你这个例子来玩呢?我认为您没有看到 Redux 在基础层面上是如何工作的。 Redux(连接)正在获取全局状态并将其映射到 {component}.props 在您的情况下,您只需将操作映射到属性(您不需要做的事情,但是可以做)。

当您从安装中获取项目时(就像我刚刚推送了一个数组),您需要对其进行一些操作。在典型的 Redux 模式中,这意味着您要反射(reflect)全局状态。

因为您的组件似乎并不依赖于您的结果,所以没有理由重新绘制它?

您想要确保您正在获取的“民意调查”已被映射。如果 parent 已经知道某件事,那么让 child 实例化一个 Action 来检索某些东西是否有意义?

简化一下:

//...boilerplate child | It isn't connected to redux
render() {
return(
<Markup>
{ this.props.poll.name }
<button
onClick={e=>{
//This changes the global state **1**
dispatch(doSomethingEvent()) //confession I use Thunk because I like more actions
}}>
Do Something
</button>
</Markup>
)
}

//...boilerplate paernt
render() {
//**2** WHICH IS RENDERED HERE WHEN IT CHANGES
const { dispatch, polls } = this.props
return (
<div>
{ polls.map( (poll, index)=>{
return <Poll pollObject={poll} key={index || poll.uuid } dispatch={dispatch} />
} ) }
</div>
)
}

///...mapping
connect(state => {
polls = state.whereEverYouStorePolls
})(Parent)

1) 该操作改变了状态——您没有发布代码,但它是“业务逻辑”2) 更改反射(reflect)在父级中,并传播到子级。

这有帮助吗?

简短的回答是,您正在显示组件,但从不调用渲染,因为您希望轮询能够反射(reflect)获取操作的状态而不依赖于它。翻转数据结构——渲染不应该要求数据,而应该提供数据。

关于javascript - ReactJS - 子组件在使用导入组件时不会渲染,但在父元素中显式标记时会渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46291069/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com