Javascript 错误：“” }; } isDisabled=（）=>{ //默认情况下，“提交”按钮处于禁用状态。当所有行都有 //所选排名和所有所选排名都是唯一的。 返回真值 } render（）{ const rows=this.state.animals.map（（动物）=>{ 返回( ); }); const headers=\ range（1，6）.map（（i）=>{i}）； 返回( {/* */} {headers} {rows} {this.state.error} {/*提交*/} {/* */} ); } } 导出默认主页面；

您几乎是在用几行选择题答案制作表单

---

简化一切的一种方法是将所有逻辑都放在最上面的组件中，在您的情况下，我认为

MainPage

将是它的位置。将一个函数作为道具传递给所有子体，使其能够更新上游的表单数据。

在第2季度，您打算如何检查每行的状态？也许您可以使用数组或对象来跟踪每个问题的状态。数组/对象以状态存储，您只需检查它们以查看状态

实际上我不清楚你的应用程序是什么样子的-一行是什么样子的？（你可能想发布一个屏幕截图）我看不到任何选择排名的方式——我甚至看不到排名的用途，或者它们在表单中的使用方式。因此，也许您的表单设计需要调整。在开始表单设计时，你应该清楚地了解应用程序的工作原理。也许可以从在纸上画屏幕开始，画一些小方框来表示对象/数组变量，并完成用户使用应用程序的过程。单击单选按钮等时，各种框会发生什么情况。您如何知道是否选择了两次相同的列组-所选列组存储在哪里？单击/选择了哪些动物？这些东西存放在哪里？先在纸上画出来

数组或对象：如果希望保持简单，可以使用数组完成整个项目。您可以有一个存储所有动物的数组。您可以使用另一个数组来存储当前选择的动物（使用.includes（）测试该数组中是否有动物）。您可以使用另一个数组来存储选定列组的行。当该行中的元素数===行数时（与动物数相同吗？如果是，则可以使用动物数组的长度进行该测试）

如何知道所选列组的行是否唯一？一种方法是禁止已选定的排名。再次使用.includes（）（例如，

arrSelectedRanks.includes（num）

）检查是否已选择排名

那么这些支票中的一张是什么样子的呢

const handleAnimalSelect = (animal) => {
   const err = this.state.selectedAnimals.includes(animal);
   if (err === true){
       this.setState(error: animal);
   }
}

return (
  <input
     type="radio"
     name={this.props.animalName}
     value={i}
     onClick={this.handleAnimalSelect}
  />

  { error !== undefined && (
    <div class={style.errorMessage}>{`Animal ${} was chosen twice`}</div>
  )}

);


};

const handleAnimalSelect=（动物）=>{
const err=this.state.selectedAnimals.includes（动物）；
如果（错误===真）{
此.setState（错误：animal）；
}
}
返回(
{错误！==未定义&&(
{`Animal${}被选中两次`}
)}
);
};

记住：状态是用来记住给定组件中变量值的。每个组件都有自己的状态。但道具用于传递到组件中的数据/函数/元素。您不更新组件中的道具值（道具值存储在另一个组件中。如果需要更新道具值，您可以使用函数将数据传递回该变量处于状态的父组件，并更新该组件中的值）

下面是一个使用

.includes（）

检查是否存在某些内容的示例：

---

尽量使你的问题简短明了，我认为你还应该增加练习题本身。不需要包含您的代码，也许一些伪代码或只是组件的布局就足够了。谢谢，我会尝试一下。我在原始问题中添加了修改后的代码。我无法使用扩展运算符更新状态。谢谢，错误是说，

selectedAnimals

state变量（尚未）不存在。你在什么地方初始化了那个变量吗？请记住，在第一次运行

.includes（）

时，至少必须先运行

selectedAnimals=[]

。不要把StackOverflow看作是一场对话——把它看作是一系列的肇事逃逸。问一个问题，投票，或者勾选一个答案都不需要花费任何费用——经常这样做。许多人阅读新的问题，一两个人阅读更新的问题。我建议你为这个问题选择一个正确的答案，然后问另一个（后续）问题——如果你愿意，可以参考这个问题。然后，在回答这个问题的人下面贴一条评论，并链接到新问题。这样，每次你问一个新问题时，都会有几十个人来帮助你。记住，他们是在帮助你，以换取你的选票和复选标记。这些不需要花费任何费用，所以请大方。class FormRow扩展React.Component{constructor（）{super（）；this.state={rowColor:false，错误：“”，selectedAnimal:[]，errSelectedRanks:[]}

import React from 'react';
import _ from 'lodash';
import FormRow from './FormRow.jsx';
import Animal from './Animal.js';

class MainPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      animals: ['panda','cat','capybara','iguana','muskrat'].map((name) => {
        return new Animal(name);
      }),
      error: ''
    };
  }


  render() {
    const rows = this.state.animals.map((animal) => {
      return (
        <FormRow
          animalName={animal.name}
          key={animal.name}
        />
      );
    });

    const headers = _.range(1, 6).map((i) => <th key={`header-${i}`}>{i}</th>);

    return (
      <div>
        <table>
          <thead>
            <tr>
              <th></th>
              {headers}
            </tr>
          </thead>
          <tbody>
            {rows}
          </tbody>
        </table>
        <div>{this.state.error}</div>
        <input type="submit" />
      </div>
    );
  }
}

export default MainPage;

import React from 'react';
import _ from 'lodash';

class FormRow extends React.Component {
  render() {
    const cells = _.range(1, 6).map((i) => {
      return (
        <td key={`${this.props.animalName}-${i}`}>
          <input
            type="radio"
            name={this.props.animalName}
            value={i}
          />
        </td>
      );
    });

    return (
      <tr>
        <th>{this.props.animalName}</th>
        {cells}
      </tr>
    )
  }
}

export default FormRow;

class Animal {
  constructor(name, rank) {
    this.name = name;
    this.rank = rank;
  }
}

export default Animal;

import React from 'react';
import _ from 'lodash';

class FormRow extends React.Component {

  constructor(){
    super();
    this.state = {
      rowColor : false,
      name: "",
      rank: 0
        // panda: 0,
        // cat:  0,
        // capybara: 0,
        // iguana:  0,
        // muskrat:  0
    }
  }

  handleChange = (e) => {
    if (this.state.rank === e.target.value){
      console.log("can't select same rank.")
    }
    console.log(e.target.name)
    console.log(e.target.value)
    this.setState({
      // [e.target.name]: e.target.value,
      name: e.target.name,
      rank: e.target.value,
      rowColor: true
    }, console.log(this.state))
  }
  
  handleChange2 = (e) => {
    let newName = e.target.name
    let newRank = e.target.value
    let cRank = this.state.rank
    let cName = this.state.name
    console.log(this.state)
    console.log(`${newRank} ${newName}`)

    if(cName !== newName) {
      if(cRank !== newRank) {
        this.setState({
         name : newName,
         rank: newRank,
         rowColor: true
        },()=> console.log(this.state))
      }
      else {
        console.log("can't select same rank")
      }
    }

    //  this.setState(previousState => {
       
    //    let cRank = previousState.rank
    //    let cName = previousState.name
    //    console.log(previousState) 

    //    return {
    //       rank: newRank,
    //       name: newName,
    //       rowColor: true
    //      }
    //  },console.log(this.state.rank))
  }

  render() {
    const cells = _.range(1, 6).map((i) => {
      return (
        <td key={`${this.props.animalName}-${i}`} onChange={this.handleChange2}>
          <input 
            type="radio"
            name={this.props.animalName}
            value={i}
          /> 
        </td>
      );
    });

    return (
     
      <tr className = {(this.state.rowColor) ? 'done':null}  >
      {/* <tr> */}
        <th>{this.props.animalName}</th>
        {cells}
      </tr>
    )
  }
}

export default FormRow;

import React from 'react';
import _ from 'lodash';
import FormRow from './FormRow.jsx';
import Animal from './Animal.js';

class MainPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      animals: ['panda','cat','capybara','iguana','muskrat'].map((name) => {
        return new Animal(name);
      }),
      error: ''
    };
  }

  getValue = ({name,rank}) =>{
      console.log(`Name: ${name} rank: ${rank}`)
  }
  
  // handleSubmit = event => {
   
  //   event.preventDefault()
  //   this.props.getValue(this.state)
  // }

  checkForUnique = () => {
    // Show this error message: `Ranks must be unique` whenever the user has selected the
  //  same rank on multiple rows.
    this.setState({
      error : "Ranks must be unique"
    })  
  
  }

  isDisabled = () =>{
   // The submit button is disabled by default. Enable it when all rows have a
   // rank selected and all selected ranks are unique.
    return true
  }

  render() {

    const rows = this.state.animals.map((animal) => {
      return (
        <FormRow
          animalName={animal.name}
          key={animal.name}
          rank={animal.rank}
          handleChange={this.handleChange}
          getValue={this.getValue}
        />
      );
    });

    const headers = _.range(1, 6).map((i) => <th key={`header-${i}`}>{i}</th>);

    return (
      <div>
        {/* <form onSubmit={this.onSubmit}> */}
        <table>
          <thead>
            <tr>
              <th></th>
              {headers}
            </tr>
          </thead>
          <tbody>
            {rows}
          </tbody>
        </table>
        <div>{this.state.error}</div>
        <input type="submit" value="Submit" disabled={this.isDisabled()} />        {/* <button type="submit">Submit</button> */}
        {/* </form> */}
      </div>
    );
  }
}

export default MainPage;

import React from 'react';
import _ from 'lodash';
import FormRow from './FormRow.jsx';
import Animal from './Animal.js';

class MainPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      animals: ['panda','cat','capybara','iguana','muskrat'].map((name) => {
        return new Animal(name);
      }),
      error: ''
    };
  }


  isDisabled = () =>{
   // The submit button is disabled by default. Enable it when all rows have a
   // rank selected and all selected ranks are unique.
    return true
  }

  render() {

    const rows = this.state.animals.map((animal) => {
      return (
        <FormRow
          animalName={animal.name}
          key={animal.name}
          rank={animal.rank}
         
          getValue={this.getValue}
          handleAnimalSelect={this.handleAnimalSelect}
        />
      );
    });

    const headers = _.range(1, 6).map((i) => <th key={`header-${i}`}>{i}</th>);

    return (
      <div>
        {/* <form onSubmit={this.onSubmit}> */}
        <table>
          <thead>
            <tr>
              <th></th>
              {headers}
            </tr>
          </thead>
          <tbody>
            {rows}
          </tbody>
        </table>
        <div>{this.state.error}</div>
        <input type="submit" value="Submit" disabled={this.isDisabled()} />        
        {/* <button type="submit">Submit</button> */}
        {/* </form> */}
      </div>
    );
  }
}

export default MainPage;

import React from 'react';
import _ from 'lodash';
import FormRow from './FormRow.jsx';
import Animal from './Animal.js';

class MainPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      animals: ['panda','cat','capybara','iguana','muskrat'].map((name) => {
        return new Animal(name);
      }),
      error: ''
    };
  }


  isDisabled = () =>{
   // The submit button is disabled by default. Enable it when all rows have a
   // rank selected and all selected ranks are unique.
    return true
  }

  render() {

    const rows = this.state.animals.map((animal) => {
      return (
        <FormRow
          animalName={animal.name}
          key={animal.name}
          rank={animal.rank}
         
          getValue={this.getValue}
          handleAnimalSelect={this.handleAnimalSelect}
        />
      );
    });

    const headers = _.range(1, 6).map((i) => <th key={`header-${i}`}>{i}</th>);

    return (
      <div>
        {/* <form onSubmit={this.onSubmit}> */}
        <table>
          <thead>
            <tr>
              <th></th>
              {headers}
            </tr>
          </thead>
          <tbody>
            {rows}
          </tbody>
        </table>
        <div>{this.state.error}</div>
        <input type="submit" value="Submit" disabled={this.isDisabled()} />        
        {/* <button type="submit">Submit</button> */}
        {/* </form> */}
      </div>
    );
  }
}

export default MainPage;

const handleAnimalSelect = (animal) => {
   const err = this.state.selectedAnimals.includes(animal);
   if (err === true){
       this.setState(error: animal);
   }
}

return (
  <input
     type="radio"
     name={this.props.animalName}
     value={i}
     onClick={this.handleAnimalSelect}
  />

  { error !== undefined && (
    <div class={style.errorMessage}>{`Animal ${} was chosen twice`}</div>
  )}

);


};