以共享状态渲染React中的项目列表
[英]Rendering a list of items in React with shared state
问题描述
原始问题
我正在尝试使用React渲染项目列表。
关键是项目共享一个公共状态，可以由每个项目控制。
为了简单起见，假设我们有一个字符串数组。
我们有一个
List组件，该组件映射到数组上并生成
Item组件。
每个
Item都有一个按钮，单击该按钮可以更改列表中所有项目的状态（我提供了一个代码段来传达我要执行的操作）。
我将
state存储在
List组件中，并将其值通过
props传递给每个
Item子
Item 。
我遇到的问题是，单击按钮（在
Item内）根本没有更改UI状态。
我认为问题与以下事实有关：单击按钮后
items不会更改（正确地如此），因此React不会重新呈现列表（鉴于道具本身，我希望进行某种UI更新当
List状态更改时，传递给
Item
isEditing也会更改）。
我如何让React处理这种情况？
注意：单击代码片段中的“
Edit按钮时似乎出现脚本错误，但是在本地运行时不会遇到该错误。
相反，不会引发任何错误，但是UI中的任何内容都不会更新。
调试它时，可以看到
List中的状态更改没有传播到其子级。
编辑的问题
鉴于最初的问题还不够清楚，我在下面重新表述。
目标
我想在React渲染项目列表。 每个项目应显示一个单词和一个“ Edit按钮。 用户一次只能编辑一个项目。
验收标准
- 加载后，用户会看到单词列表，每个单词旁边都有一个“
Edit按钮。 - 单击项目1的“
Edit”时，只有项目1变为可编辑，“Edit按钮变为“Save按钮。 列表中的其余项目将不再显示其相应的“Edit按钮。 - 单击项目0的
Save，将显示该项目的新值。 所有“编辑”按钮（对于其余项目）应再次变为可见。
问题
在我最初的实现中，我将编辑状态存储在父组件（ List ）中，但是这种状态没有正确地传播到其Item子Item 。
注意：状态管理逻辑缺少我的原始实现，后来我发现这是主要的罪魁祸首（请参阅下面的响应）。 它也有一个绑定错误，如下面的@Zhang所述。 我将其留在此处以供将来参考，尽管这并不是一个很好的例子。
这是我的原始实现：
const items = ['foo', 'bar']; class List extends React.Component { constructor(props) { super(props); this.state = { isEditing: false }; } toggleIsEditing() { this.setState((prevState) => { return { isEditing: !prevState.isEditing } }); } render() { return ( <ul> {items.map((val) => ( <Item value={val} toggleIsEditing={this.toggleIsEditing} isEditing={this.state.isEditing}/> ))} </ul> ); } } class Item extends React.Component { render() { return ( <li> <div> <span>{this.props.value}</span> { !this.props.isEditing && (<button onClick={this.props.toggleIsEditing}> Edit </button>) } { this.props.isEditing && (<div> <span>...Editing</span> <button onClick={this.props.toggleIsEditing}> Stop </button> </div>) } </div> </li> ); } } ReactDOM.render(<List />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <body> <div id="app" /> </body>
2 个解决方案
解决方案1
0 2017-08-16 01:06:17
您在将toggleIsEditing传递给子组件时未绑定父作用域
<Item value={val} toggleIsEditing={this.toggleIsEditing.bind(this)} isEditing={this.state.isEditing}/>
解决方案2
0 已采纳 2017-08-16 21:22:18
我对问题重新表述时，通过重新考虑实现来找出解决方案。 我的原始实现存在一些问题：
-
List类的非生命周期方法中的this不受类范围的约束（如@ZhangBruce在其回答中指出的那样）。 -
List的状态管理逻辑缺少其他属性来处理用例。
另外，我认为向Item组件本身添加state对于正确传播更新很重要。 具体来说，添加state.val是关键（据我了解）。 可能还有其他方法（可能更简单），在这种情况下，我很想知道，但是与此同时，这是我的解决方案：
const items = ['foo', 'bar']; class List extends React.Component { constructor(props) { super(props); this.state = { editingFieldIndex: -1 }; } setEdit = (index = -1) => { this.setState({ editingFieldIndex: index }); } render() { return ( <ul> {items.map((val, index) => ( <Item val={val} index={index} setEdit={this.setEdit} editingFieldIndex={this.state.editingFieldIndex} /> ))} </ul> ); } } class Item extends React.Component { constructor(props) { super(props); this.state = { val: props.val }; } save = (evt) => { this.setState({ val: evt.target.value }); } render() { const { index, setEdit, editingFieldIndex } = this.props; const { val } = this.state; const shouldShowEditableValue = editingFieldIndex === index; const shouldShowSaveAction = editingFieldIndex === index; const shouldHideActions = editingFieldIndex !== -1 && editingFieldIndex !== index; const editableValue = ( <input value={val} onChange={(evt) => this.save(evt)}/> ) const readOnlyValue = ( <span>{val}</span> ) const editAction = ( <button onClick={() => setEdit(index)}> Edit </button> ) const saveAction = ( <button onClick={() => setEdit()}> Save </button> ) return ( <li> <div> { console.log(`index=${index}`) } { console.log(`editingFieldIndex=${editingFieldIndex}`) } { console.log(`shouldHideActions=${shouldHideActions}`) } { shouldShowEditableValue ? editableValue : readOnlyValue } { !shouldHideActions ? shouldShowSaveAction ? saveAction : editAction : "" } </div> </li> ); } } ReactDOM.render(<List />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <body> <div id="app" /> </body>
反应原生平面列表不渲染项目
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.