0

我想知道对于我遇到的问题是否有另一种适当的解决方案。当 React 将组件重新挂载到不同的父节点时，我希望组件的状态保持活动状态。我正在使用一组组件，这些组件被拆分为不同的父节点进行渲染。

假设我从 API 获得了一些数据，现在我遍历数据并创建一堆组件以推送到这样的数组中

for (const [index, task] of APIRESULT.entries()) {
 let item = <Task type={task['type']} value={task['value']}/>
 taskarray.push(item);
}

Task 是一个类组件，在其构造函数中我将状态设置为

state = {
         type: props.type,
         value: props.value
        }

现在我的父组件看起来有点像这样：

class Example extends React.Component{
    constructor(props){
        super(props)
        this.state = { 
            activeTasks: [],
            passiveTasks: [],
            allTasks: [],          
        };
    }

   componentDidMount(){
     let tasks = await getTasksFromApi();
     this.setState({
            allTasks = tasks,
            activeTasks: tasks.filter(item => item.props.type === 0),
            passiveTasks: tasks.filter(item => item.props.type === 1),
            })
   }
   rearrangeTasks(){
        this.setState({
            activeTasks: this.state.allTasks.filter(item => item.ref.current.state.type === 0),
            passiveTasks: this.state.allTasks.filter(item => item.ref.current.state.type === 1),
        })
    }
  render(){
   return(
    <div>
    <Child1 className="all-tasks-of-type-0">
     {this.state.passiveTasks}
    </Child1>
 
    <Child2 className="all-tasks-of-type-1">
     {this.state.activeTasks}
    </Child2>
    </div>  
    )
  }
}

（如果您想知道我在重新排列函数中过滤了什么，我在此示例中省略了 refs 的设置，但它有效）

现在，“任务”是用户可以与之交互的组件。用户将 state.value = 3 设置为 state.type 0（被动）组件，然后点击一个按钮，将该组件的 state.type 设置为 1，使其成为活动任务并调用重新排列（）函数示例组件。React 删除 Child1 中的 Component 并将其移动到 Child2 ，这使它再次挂载并将道具作为其状态的值。所以它再次是类型 0 和值 0（但这次在 Child2 中呈现）。但我希望它保持它在 Child1 父级中的状态。

我的解决方案类似于一个状态数组，它将任务组件的当前状态存储在“示例”父节点中。在任务的每次挂载上，它都会在这个状态数组中搜索它的状态值，如果不存在则获取道具。另一种解决方案可能是存储 API 数据数组并仅在该数组中设置值并在每次更改时循环遍历它以获取正确的道具。但这对我来说听起来并不高效。

我的问题是，是否还有其他更优雅的解决方案，或者我处理这种情况的方式是否完全错误。这些示例是非生产性代码，如果有拼写错误，我很抱歉，我是 React 新手，没有找到任何好的提示来解决这个问题。提前致谢。

编辑：这里的简单示例： https ://codesandbox.io/s/bold-proskuriakova-istmq7 ?file=/src/Tasks.js 红方块在点击时正确跳转到底部 div，但将使用 orig 安装。道具类型。

4

0 回答 0