Javascript 在自定义复选标记组件中，我必须按两次才能显示该复选标记？

我有一个组件，其中我使用自定义复选标记组件选择了一条消息，所选消息将在其中继续。复选标记根据索引集显示，但当我单击一次时，该选项确实被选中，但复选标记不会显示，而是我必须按两次才能显示它。代码如下

import { Divider, ListItem } from '@material-ui/core';
import React from 'react';
import './SelectMessageComponent.css';
import CheckSharpIcon from '@material-ui/icons/CheckSharp';
const SelectMessageComponent = (props) => {
  const [selectedIndex, setSelectedIndex] = React.useState(props.selectedIndex);
  let item = [];
  const onSelectedNumber = (index, val) => {
    setSelectedIndex(index);
    props.sendData(val);
  };
  props.dataObj.forEach((el, i) => {
    item.push(
      <div className={'spanMessageClass '} key={i}>
        <ListItem onClick={() => onSelectedNumber(i, el.message)}>
          {el.message}
        </ListItem>
        {i === selectedIndex && (
          <CheckSharpIcon className={'checkMarkMessageIcon'} />
        )}
      </div>
    );
  });
  item = item.reduce((r, a) => r.concat(a, <Divider key={r} />), []);
  return item;
};

export default SelectMessageComponent;

从'@material ui/core'导入{Divider，ListItem}；
从“React”导入React；
导入“./SelectMessageComponent.css”；
从“@material ui/icons/CheckSharp”导入CheckSharpIcon；
const SelectMessageComponent=（道具）=>{
const[selectedIndex，setSelectedIndex]=React.useState（props.selectedIndex）；
设项=[]；
const onSelectedNumber=（索引，val）=>{
设置选定的索引（索引）；
道具发送数据（val）；
};
道具数据对象forEach（（el，i）=>{
项目.推送(
onSelectedNumber（i，el.message）}>
{el.message}
{i==selectedIndex&&(
)}
);
});
项目=项目减少（（r，a）=>r.concat（a，），[]）；
退货项目；
};
导出默认SelectMessage组件；

---

我做错了什么？

我将您的代码转换为codesandbox，但无法复制该问题。（以防你想看一看）

很难说问题的主要原因是什么，但在这段代码中有许多地方可以改进：

• 您正在创建

  道具的副本。selectedIndex

  并将其作为

  selectedIndex

  保存在您的商店中。React背后的主要思想是，您试图将您的状态保持在一个中心位置。您的错误很可能是由

  props.selectedIndex

  和

  selectedIndex

  （状态）之间的同步问题引起的
• 单独测试组件——您可以用jest编写一个简洁的单元测试
• 不相关，但总的来说，我反对将太多的逻辑转移到javascript中

这也很好：

const SelectMessageComponent=（道具）=>{
const[selectedIndex，setSelectedIndex]=React.useState（props.selectedIndex）；
设项=[]；
const onSelectedNumber=（索引，val）=>{
设置选定的索引（索引）；
道具发送数据（val）；
};
返回(
{props.dataObj.map（（el）=>(
onSelectedNumber（i，el.message）}>
{el.message}
{i==selectedIndex&&(
)}
{i

嘿，谢谢你的回复，我确实以错误的方式接近状态，我代码中的主要问题是你可以从我在对话框中选择的视频中看到，主要问题是我没有将选择组件作为子组件传递，而是直接在对话框组件内操作它，这是不受鼓励的，因为如果我更改导入子组件而不是在传递子组件内，对话框内的状态将更新，因此，它会更新整个组件，我必须按两次才能更新。正如你所说，我确实在提出一个国家管理问题：）（新的反应）