Reactjs React：更新特定元素的状态

我正在创建一个程序，在这个程序中，用户应该键入一个正确版本的乱序句子。如下图所示

我想要的是，当用户得到正确答案时，在输入旁边会显示一个勾号。比如说

但是，并非所有输入都是正确的。为了实现这个功能，我使用state，但它并没有给我期望的结果。如何确保在特定行旁边显示勾号

我的代码如下

import React, { Component } from "react";
import { Button } from "react-bulma-components/full";
import { MdDoneAll } from "react-icons/md";
const uuidv1 = require("uuid/v1");


export default class DialogueShuffleFrame2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      shuffledArray: [],
      inputAnswer: "",
      score:0,
      showTick:false
    };
    this.writeSomething = this.writeSomething.bind(this);
  }

  componentDidMount() {
    const shuffle = a => {
      var j, x, i;
      for (i = a.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        x = a[i];
        a[i] = a[j];
        a[j] = x;
      }
      return a;
    };

    let shuffledArray =
      this.props.lines[0].parts &&
      this.props.lines[0].parts.map(obj => {
        return {
          id: uuidv1(),
          parts: {
            speaker: obj.speaker,
            words: shuffle(obj.words.split(" "))
          },
          correctAnswer: obj.words
        };
      });

    this.setState({
      shuffledArray
    });
  }

  writeSomething(e) {
    e.preventDefault();
    this.setState({
      inputAnswer: e.target.value
    });
  }

  checkLines(str, obj) {
    obj.map(item => {
        //console.log(item.correctAnswer)
        if (item.correctAnswer === str.trim()) {

            //console.log('correct')
            this.setState({
                score:this.state.score + 80,
                inputAnswer:'',
                showTick:true
            })
        }
        return true
    })
  }

  render() {
    //console.log(this.state.shuffledArray);
    const shuffles =
      this.state.shuffledArray &&
      this.state.shuffledArray.map(item => (

        <li key={item.id}>
          <input onChange={this.writeSomething} />
          {this.state.showTick && <MdDoneAll style={{color:'blue'}}/>}
          <Button
              color="primary"
              onClick={() => {
                this.checkLines(this.state.inputAnswer, this.state.shuffledArray);
              }}
              size="small"
            >
              Check
            </Button>
          {item.parts.words.map((word, index) => (
            <span key={index}>{`${word} `}</span>
          ))}
        </li>
      ));
    return (
      <div>
        Dialogue 3<ul>{shuffles}</ul>
        {this.state.score}
      </div>
    );
  }
}

import React，{Component}来自“React”；
从“react bulma components/full”导入{Button}；
从“react icons/md”导入{MdDoneAll}；
const uuidv1=require（“uuid/v1”）；
导出默认类对话框UEShuffleFrame2扩展组件{
建造师（道具）{
超级（道具）；
此.state={
ShuffleArray:[]，
输入应答器：“”，
分数：0，
showTick:false
};
this.writeMething=this.writeMething.bind（this）；
}
componentDidMount（）{
常数shuffle=a=>{
变量j，x，i；
对于（i=a.length-1；i>0；i--）{
j=数学地板（数学随机（）*（i+1））；
x=a[i]；
a[i]=a[j]；
a[j]=x；
}
返回a；
};
让我们来洗牌吧=
this.props.lines[0]。零件&&
this.props.lines[0].parts.map（obj=>{
返回{
id:uuidv1（），
部分：{
演讲者：obj.演讲者，
单词：shuffle（obj.words.split（“”）
},
正确答案：obj.words
};
});
这是我的国家({
洗牌阵
});
}
写入方法（e）{
e、 预防默认值（）；
这是我的国家({
输入者：e.目标值
});
}
检查线（str、obj）{
对象映射（项=>{
//console.log（项.正确答案）
如果（item.correctAnswer==str.trim（））{
//console.log（'correct'）
这是我的国家({
分数：this.state.score+80，
输入应答器：“”，
showTick：对
})
}
返回真值
})
}
render（）{
//console.log（this.state.shuffledArray）；
常量洗牌=
这个州，ShuffleArray&&
this.state.shuffledArray.map（项=>(

{this.state.showTick&&}
{
this.checkLines（this.state.inputswer，this.state.shuffledArray）；
}}
size=“小”
>
检查
{item.parts.words.map（（单词，索引）=>(
{${word}}
))}

));
返回(
对话3
{shuffles}
{this.state.score}
);
}
}

此.state.showTick在您的情况下是通用的。一旦设置为true，它将用于每个元素。
您需要将其更改为一个对象，并使用
item.id
显示勾号

第一:

 this.state = {
      shuffledArray: [],
      inputAnswer: "",
      score:0,
      showTick:{}
    };


{this.state.showTick[item.id]&&}
{
this.checkLines（item.id、this.state.inputswer、this.state.shuffledArray）；
}}
size=“小”
>
检查
{item.parts.words.map（（单词，索引）=>(
{${word}}
))}


让我知道它是否有效。没有完整的代码很难测试它
 
此.state.showTick在您的情况下是通用的。一旦设置为true，它将用于每个元素。
您需要将其更改为一个对象，并使用
item.id
显示勾号

第一:

 this.state = {
      shuffledArray: [],
      inputAnswer: "",
      score:0,
      showTick:{}
    };


{this.state.showTick[item.id]&&}
{
this.checkLines（item.id、this.state.inputswer、this.state.shuffledArray）；
}}
size=“小”
>
检查
{item.parts.words.map（（单词，索引）=>(
{${word}}
))}


让我知道它是否有效。没有完整的代码很难测试它
 首先，我在componentDidMount中生成的对象中添加了属性showTick，showTick:false

    const shuffle = a => {
      var j, x, i;
      for (i = a.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        x = a[i];
        a[i] = a[j];
        a[j] = x;
      }
      return a;
    };

    let shuffledArray =
      this.props.lines[0].parts &&
      this.props.lines[0].parts.map(obj => {
        return {
          id: uuidv1(),
          parts: {
            speaker: obj.speaker,
            words: shuffle(obj.words.split(" ")),
            showTick:false
          },
          correctAnswer: obj.words
        };
      });

    this.setState({
      shuffledArray
    });
  }

然后在
检查行
功能中，我将
showTick
分配给
true

checkLines(str, obj) {
    obj.map(item => {
        //console.log(item.correctAnswer)
        if (item.correctAnswer === str.trim()) {

            //console.log('correct')
            this.setState({
                score:this.state.score + 80,
                inputAnswer:''
            })
            item.parts.showTick = true
        }
        return true
    })
  }

然后在渲染部分我展示了它

render() {
    //console.log(this.state.shuffledArray);
    const shuffles =
      this.state.shuffledArray &&
      this.state.shuffledArray.map(item => (

        <li key={item.id}>
          {item.parts.speaker}
          <input onChange={this.writeSomething} />
          {item.parts.showTick && <MdDoneAll style={{color:'blue'}}/>}
          <Button
              color="primary"
              onClick={() => {
                this.checkLines(this.state.inputAnswer, this.state.shuffledArray);
              }}
              size="small"
            >
              Check
            </Button>
          {item.parts.words.map((word, index) => (
            <span key={index}>{`${word} `}</span>
          ))}
        </li>
      ));
    return (
      <div>
        Dialogue 3<ul>{shuffles}</ul>
        {this.state.score}
      </div>
    );
  }

render（）{
//console.log（this.state.shuffledArray）；
常量洗牌=
这个州，ShuffleArray&&
this.state.shuffledArray.map（项=>(

{item.parts.speaker}
{item.parts.showTick&&}
{
this.checkLines（this.state.inputswer，this.state.shuffledArray）；
}}
size=“小”
>
检查
{item.parts.words.map（（单词，索引）=>(
{${word}}
))}

));
返回(
对话3
{shuffles}
{this.state.score}
);
}
首先，我在componentDidMount中生成的对象中添加了属性showTick，showTick:false

    const shuffle = a => {
      var j, x, i;
      for (i = a.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        x = a[i];
        a[i] = a[j];
        a[j] = x;
      }
      return a;
    };

    let shuffledArray =
      this.props.lines[0].parts &&
      this.props.lines[0].parts.map(obj => {
        return {
          id: uuidv1(),
          parts: {
            speaker: obj.speaker,
            words: shuffle(obj.words.split(" ")),
            showTick:false
          },
          correctAnswer: obj.words
        };
      });

    this.setState({
      shuffledArray
    });
  }

然后在
检查行
功能中，我将
showTick
分配给
true

checkLines(str, obj) {
    obj.map(item => {
        //console.log(item.correctAnswer)
        if (item.correctAnswer === str.trim()) {

            //console.log('correct')
            this.setState({
                score:this.state.score + 80,
                inputAnswer:''
            })
            item.parts.showTick = true
        }
        return true
    })
  }

然后在渲染部分我展示了它

render() {
    //console.log(this.state.shuffledArray);
    const shuffles =
      this.state.shuffledArray &&
      this.state.shuffledArray.map(item => (

        <li key={item.id}>
          {item.parts.speaker}
          <input onChange={this.writeSomething} />
          {item.parts.showTick && <MdDoneAll style={{color:'blue'}}/>}
          <Button
              color="primary"
              onClick={() => {
                this.checkLines(this.state.inputAnswer, this.state.shuffledArray);
              }}
              size="small"
            >
              Check
            </Button>
          {item.parts.words.map((word, index) => (
            <span key={index}>{`${word} `}</span>
          ))}
        </li>
      ));
    return (
      <div>
        Dialogue 3<ul>{shuffles}</ul>
        {this.state.score}
      </div>
    );
  }

render（）{
//console.log（this.state.shuffledArray）；
常量洗牌=
这个州，ShuffleArray&&
this.state.shuffledArray.map（项=>(

{item.parts.speaker}
{item.parts.showTick&&}
{
this.checkLines（this.state.inputswer，this.state.shuffledArray）；
}}
size=“小”
>
检查
{item.parts.words.map（（单词，索引）=>(
{${word}}
))}

));
返回(
对话3
{shuffles}
{this.state.score}
);
}
您应该添加一个sh