Javascript 为什么'；不更新DOM？

为什么不更新以下代码的DOM？我希望高亮显示的项目在状态更改时会更改，但这不会发生

从“React”导入React；
进口{
样式表，
文本，
看法
扁平列表
}从“反应本机”；
常量食物=[
{
关键：寿司
},
{
主动：对，
关键：“伯加雷”
},
{
钥匙：“比萨饼”
},
{
关键：“意大利面”
}
];
常量食物列表=（道具）=>{
console.log（props.selected==food[0].key）；
返回(
{item.key}
}
/>
)
}
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
这个。i=0；
此.state={
精选：食物[this.i]
};
设置间隔（（）=>{
this.i=（this.i+1）%food.length；
this.setState（previousState=>{
返回{
精选：食物[this.i]
};
});
}, 1000);
}
renderFoodlist（）{
返回(
)
}
render（）{
返回(
摇动手机以打开开发者菜单。
{this.renderFoodlist（）}
);
}
}
const styles=StyleSheet.create({
容器：{
paddingTop:22，
},
text项目：{
尺寸：24，
},
活动项目：{
尺寸：24，
背景颜色：“红色”，
},
});

来自：

通过将extraData={this.state}传递给FlatList，我们可以确保FlatList 当state.selected更改时，其自身将重新呈现。无背景 这个道具，FlatList不会知道它需要重新渲染任何项目 因为它也是一个PureComponent，并且道具比较不会 显示任何更改

请参阅此示例，并注意注释掉

extraData

（它不会更新）时发生的情况

从“React”导入React；
进口{
样式表，
文本，
看法
平面列表，
触控高光，
}从“反应本机”；
常量食物=[
{
关键：寿司
},
{
关键：“伯加雷”
},
{
钥匙：“比萨饼”
},
{
关键：“意大利面”
}
];
类FoodList扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
已选择：0，
};
}
_renderItem（项目）{
返回(
this.setState（{selected:item.index}）}>
{item.index}{item.item.key}
);
}
render（）{
返回(
{JSON.stringify（this.state）}
item.key}
renderItem={（项目）=>此
extraData={this.state}//重要！
/>
);
}
}
导出默认类App扩展React.Component{
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
容器：{
paddingTop:22，
},
text项目：{
尺寸：24，
},
活动项目：{
尺寸：24，
背景颜色：“红色”，
},
});

当我运行代码时，由于setInterval（），我得到了一个无限循环，您注意到了吗？您应该将setInterval放在componentDidMount（）生命周期方法中。在

以前的状态下

请检查该部分。您在组件上设置的变量

I

实际上是不必要的。由于使用的是静态数据，因此应该使用元素索引而不是数组中的实际值来设置状态<代码>设置状态（previousState=>（{selected:（previousState.selected+1）%food.length}））。事实上，我要做的是接收

食物
变量作为道具，这样我就不必使用全局变量。我已经实现了你们要求的更改，但问题没有改变。
import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  FlatList
} from 'react-native';

const food = [
  {
    key: 'Sushi'
  },
  {
    active: true,
    key: 'Burgare'
  },
  {
    key: 'Pizza'
  },
  {
    key: 'Pasta'
  }
];

const FoodList = (props) => {
  console.log(props.selected === food[0].key);
    return (
      <FlatList
        data={food}
        renderItem={({item}) =>
            <View style={styles.item}>
              <Text
                      style={item.key === props.selected ? styles.activeItem : styles.textItem}>
                      {item.key}
              </Text>
            </View>}
        />
    )
}

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.i = 0;
    this.state = {
      selected: food[this.i]
    };

    setInterval(() => {
      this.i = (this.i + 1) % food.length;
      this.setState(previousState => {
        return {
          selected: food[this.i]
        };
      });
    }, 1000);
  }

  renderFoodlist() {
    return (
        <FoodList selected={this.state.selected.key} />
    )
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Shake your phone to open the developer menu.</Text>
        {this.renderFoodlist()}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 22,
  },
  textItem: {
    fontSize: 24,
  },
  activeItem: {
    fontSize: 24,
    backgroundColor: 'red',
  },
});

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  TouchableHighlight,
} from 'react-native';

const food = [
  {
    key: 'Sushi'
  },
  {
    key: 'Burgare'
  },
  {
    key: 'Pizza'
  },
  {
    key: 'Pasta'
  }
];

class FoodList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selected: 0,
    };
  }

  _renderItem(item) {
    return (
      <TouchableHighlight onPress={() => this.setState({ selected: item.index })}>
        <View>
          <Text style={this.state.selected === item.index ? styles.activeItem : styles.textItem}>
            {item.index} {item.item.key}
          </Text>
        </View>
      </TouchableHighlight>
    );
  }

  render() {
    return (
      <View>
        <Text>{JSON.stringify(this.state)}</Text>
        <FlatList
          data={food}
          keyExtractor={(item) => item.key}
          renderItem={(item) => this._renderItem(item)}
          extraData={this.state}  // IMPORTANT!
        />
      </View>
    );
  }
}

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <FoodList />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 22,
  },
  textItem: {
    fontSize: 24,
  },
  activeItem: {
    fontSize: 24,
    backgroundColor: 'red',
  },
});