React从数组状态中移除项不会重新呈现
是因为React在比较数组时使用的是浅比较（shallow comparison）的方式。当我们直接从数组中移除项时，数组的引用并没有发生变化，只是数组中的某个元素被删除了，因此React无法检测到数组的变化，也就不会重新渲染组件。
为了解决这个问题，我们可以采取以下几种方法：
- 使用不可变数据结构：可以使用像Immutable.js这样的库来创建不可变的数据结构。当我们从数组中移除项时，实际上是创建了一个新的数组，React可以检测到这个新数组的变化，并重新渲染组件。
- 使用数组的slice方法：可以使用数组的slice方法来创建一个新的数组，然后将需要移除的项排除在新数组之外。这样也能够创建一个新的数组，从而触发React的重新渲染。
- 使用key属性：在渲染数组时，为每个项添加一个唯一的key属性。当需要移除某个项时，可以通过改变key属性的值来触发React重新渲染。
总结起来，React从数组状态中移除项不会重新呈现是因为React使用浅比较来比较数组，只有数组的引用发生变化时才会重新渲染组件。为了解决这个问题，我们可以使用不可变数据结构、数组的slice方法或者key属性来创建新的数组，从而触发React的重新渲染。
相关·内容
1回答
React未呈现新状态
reactjs、react-hooks
我正在尝试学习新的React钩子。我已经编写了一个简单的todolist，用户可以输入输入来创建新的待办事项，然后单击待办事项将其删除。但是，在删除待办事项后，它不会重新呈现。
以下是我的代码
import React, { useState, Fragment } from "react";
const Todo = () => {
const [inputVal, setInput] = useState("");
const [list, setList] = useState([]);
const handleInput = e =&
浏览 0提问于2020-01-14得票数 0
1回答
什么时候使用Immutable.js来做出反应是有意义的？
reactjs、immutable.js
我已经读过，只有当你有一个深树比较的时候，Immutable.js才有意义。因此，在我的应用程序状态如下的情况下，我假设：
const taskList = [
{
name: 'task 1',
priority: '1',
isDone: false
},
{
name: 'task 2',
priority: '1',
isDone: false
},
{
name: 'task 3',
priority: '1',
浏览 0提问于2017-04-18得票数 2
回答已采纳
4回答
React.Component对React.PureComponent
reactjs、state
官方的声明，"React.PureComponent's shouldComponentUpdate()只是肤浅地比较对象“，如果状态”很深“，则建议不要这样做。
考虑到这一点，在创建React组件时，人们是否应该更喜欢React.PureComponent？
问题
使用React.Component是否对性能有影响，我们可以考虑使用React.PureComponent
我猜shouldComponentUpdate() of PureComponent只会做一些肤浅的比较。如果是这样的话，难道不能用这种方法进行更深层次的比较吗？
“此外，React.PureCo
浏览 4提问于2016-12-27得票数 270
回答已采纳
2回答
在不呈现整个列表的情况下在Listview中追加新项- React Native/ React js
reactjs、react-native、react-native-flatlist
在react-native FlatListview中，我想在list中添加一个新项。
<FlatList
data={[{key: 'a'}, {key: 'b'}]}
renderItem={({item}) => <Text>{item.key}</Text>}
/>
除了key a和b ie data = [{key: 'a'}, {key: 'b'},{key: 'c'}]之外，data还来自API。
每当新的键进入时，它都会呈现整个列表视图，这会产生一些
浏览 28提问于2017-12-16得票数 1
3回答
如何维护状态
reactjs、redux
我有一个包含一些文本的文本框，这些文本是在执行ajax调用后获得的。每当用户键入一些文本时，我都会将值分派给state。这将呈现当前文本区，并将光标移到行的前面。
如何避免重新渲染。我应该如何维护状态。
class Design extends React.Component{
constructor(){
super();
}
handleMessageChange(e){
let msg = e.target.innerText;
this.props.dispatch({type:'design_changed',designObj:{pro
浏览 0提问于2019-04-02得票数 0
1回答
React不会在状态和道具更改上重新呈现。
javascript、reactjs、react-hooks、mouseevent、react-props
我试图在React.js中创建一个非常简单的绘图。实际上，我只是将我创建的Vanilla JS代码转换为React应用程序。
一切看起来都正常，但是渲染点的组件并没有在道具上重新呈现。然而，它的道具正在改变(我在react dev-tools中查看了它)。我正在使用自定义事件侦听器，这可能是错误的原因吗？
import React, { useEffect, useState} from "react";
const addPoint = ({points, setPoints}) => (event) => {
const newPts = points
浏览 3提问于2020-07-07得票数 1
回答已采纳
2回答
组件的重新渲染是否会创建其子组件的新实例？
reactjs
class Clock extends React.Component {
render() {
return (
<div>
<MyComponent/>
</div>
);
}
}
假设此组件重新呈现。它会在每次渲染时创建一个新的MyComponent实例吗？
浏览 5提问于2018-08-05得票数 2
回答已采纳
4回答
Redux:从嵌套的对象/数组中添加/删除，而不进行变异？
reactjs、redux、react-redux
我以为assign应该做一个新的东西，所以我在我的减速机里做了这个：
case types.ADD_ATTRIBUTE:
var newState = Object.assign({}, state)
newState.attributes[action.industry].push(action.attribute)
return Object.assign({}, state, newState);
case types.REMOVE_ATTRIBUTE:
var newState = Object.assign({}, s
浏览 4提问于2016-08-26得票数 3
回答已采纳
2回答
为了在我的React应用程序中获得更好的性能，我使用了PureComponent，它有props，但是我不希望它在这个props更改时运行render方法。我知道我们不能在shouldComponentUpdate中使用React.PureComponent，但我的问题是：
有没有办法避免更新React.PureComponent？
我希望这个组件根本不更新/渲染。
编辑:我在pureComponent中使用pureComponent时会收到这个警告：
警告: GameObjectFall有一个名为shouldComponentUpdate()的方法。在扩展shouldComponentUp
浏览 2提问于2017-11-27得票数 5
回答已采纳
1回答
帕伦特重新渲染但它的孩子不会的情况是什么？
reactjs
我被告知，如果父母的道具发生变化，孩子不会重新呈现，而是如果父母的状态发生变化。
在下面的情况下，当我单击按钮，子重呈现，这是合理的，因为它的父母的状态是被触发的，但我不知道为什么孙女也得到重新渲染！它的父母的状态(孩子的状态)没有改变。
那么这里的规矩是什么？
会是什么情况：
1)应用程序只呈现一个子和外孙呈现？
2)应用程序呈现但独生子女不呈现孙女？
顺便说一句，我不是指如何使用或pureComponent，我只是想知道React如何呈现嵌套的子程序:)
import React, { useState } from "react";
const App = () =&g
浏览 1提问于2019-11-17得票数 2
回答已采纳
2回答
如果一个无状态组件的属性没有改变，它会重新呈现吗？
reactjs
我从React学到的一件事是，如果组件的道具没有改变，那么React就不会费心重新渲染组件。对于无状态组件也是这样吗？或者它们的行为更像是“愚蠢的”函数，并且每次都会被执行？
例如，如果我有：
import StatelessComponent from '../StatelessComponent';
export default class DocumentsTable extends React.Component {
state = {
something: 'foobar',
};
render() {
return (
浏览 1提问于2017-10-14得票数 51
回答已采纳
1回答
React钩子不像预期的那样工作
javascript、reactjs、typescript、react-redux、react-hooks
我有一个简单的useState挂钩，用于管理所选复选框的状态。
选中的复选框应显示在ui中(在我的过滤器中)。
选中的复选框将正确存储，但只有当我关闭筛选器组件并再次打开它时才会显示。在选中复选框后不会立即进行检查。
以下是我的当前状态(简化)：
滤波器组件：
const [selected, setSelected] = useState([]);
const handleState = (id: string) => {
const selectedIndex = selected.findIndex((i) => i.id === id);
if
浏览 3提问于2021-09-16得票数 0
回答已采纳
1回答
useEffect函数正在工作，但不会在第一次单击时呈现
reactjs
我想在我的页面上排序产品从最高到最低的价格为基础。
当我点击“最高”(第55行)或“最低”(第56行)时，状态(filterProducts)正在后端更新(我可以在开发人员工具中看到)，但渲染不会反映在屏幕上，顺序也不会改变。它只在第一次点击之后的每一次点击时起作用。为什么会这样呢？
如果你需要更多的细节，请告诉我。非常感谢您的帮助。
import React, { useState, useEffect } from 'react';
import './../App.css';
function Shop() {
const [products, set
浏览 0提问于2021-01-13得票数 0
2回答
React useState与原始变量
reactjs、react-hooks
例如，我有一些需要渲染的数据。道具总是一样的，但它们来自道具。
const items = props.data.values.map(value => ({
id: value.id
name: value.name,
rating: Number(value.rating)
}));
return (
{items.map(item => (
<div key={item.id}....
)}
);
我可以对像这样的项目变量使用useState吗：
const [items] = useState(data.values.map(value
浏览 0提问于2019-02-20得票数 2
1回答
更改redux状态时删除元素
reactjs、redux、react-redux
当从redux状态中删除元素时，我有更新组件的问题。
我的组件：
const mapStateToProps = state => ({
products: state.shoppingBasket.list,
});
const ShoppingBasket = React.createClass({
propTypes: {
removeProduct: React.PropTypes.func.isRequired,
products: React.PropTypes.array,
open: React.PropTypes.func.isRequ
浏览 1提问于2017-02-09得票数 1
回答已采纳
1回答
React useEffect钩子循环，依赖问题
reactjs、react-hooks
这个效果最终会在一个无限的重新渲染循环中结束，它会不断地向url发出请求。基本上，我拥有的是一个获取国家/地区的API调用。然后根据过滤器输入，呈现与搜索匹配的国家/地区。如果只有一个结果，它还应该获取并显示首都的天气信息。 我唯一想要重新渲染天气的时候是当国家的值发生变化的时候。不知何故，我不能让它工作.. let filtered = countries.filter(country => country.name.toUpperCase().includes(filter.toUpperCase()))
const [weather, setWeather] = useStat
浏览 7提问于2020-04-26得票数 0
4回答
角2有重绘优化吗？
javascript、angular、angular2-template
从几个月以来，我一直在使用React，而且React并不只是简单地重新呈现一个组件，而是找到了不同之处，并进行了这些更改。角质2做这样的事吗？
而且，当检测到状态变化时，角2是否重新呈现根节点中的所有组件，还是只重新呈现那些检测到变化的特定组件及其子树？
浏览 5提问于2016-04-24得票数 5
回答已采纳
1回答
为什么react在输入更改时重新呈现函数组件中的所有元素
reactjs、react-hooks
我正在尝试理解如何停止在函数组件中重新呈现元素(或者我可能不需要这样做?) 我对所有输入使用单个useState，并共享相同的onChange处理程序。 我在表单(100+)中有大量的输入字段，每当我在开发工具分析器中输入其中任何一个时，我都会看到它们都被重新渲染，假设这是因为在每次渲染时，我的onChange处理程序都被“重新创建”，所有输入元素也都被重新渲染。如果我尝试将其包装在useCallback中，没有任何变化，但是如果我将输入元素包装在Rect.memo组件中，那么它不会重新呈现。 const MyInput = props => {
return <in
浏览 20提问于2020-03-30得票数 2
回答已采纳
4回答
React.js如何重新呈现组件？
reactjs
我是新来的。我在看他们的医生了解反应是如何运作的。因此，有人提到，当state/props/setState()更改/调用时，重新响应整个组件。
此外，我还看到react元素是不可变的，只有在发生更改时才会呈现它们。因此，当react试图呈现组件时，它实际上遍历所有元素，检查差异，并且只呈现数据被更改的元素。它不会简单地重新呈现整个组件。
我说得对吗？还是我的理解错了？
浏览 8提问于2020-10-23得票数 3
回答已采纳
2回答
Tac趾反应
beginner、tic-tac-toe、react.js、jsx
我在“反应”中写了这个抽搐脚趾游戏。我正在学习反应。欢迎反馈。我故意用单一的文件，专注于反应而不是其他方面。
<!-- 3x3 Tic tac toe implementation in React JS. -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Tic Tac Toe</title>
<!-- Import react -->
<script src=
浏览 0提问于2017-03-21得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
