时间戳

首页 > 解决方案 > 来自 api 响应的数组，没有收到 true 和 false 属性以在 React 中动态创建复选框

javascript - 来自 api 响应的数组，没有收到 true 和 false 属性以在 React 中动态创建复选框

问题描述

我从 React-Redux Web 应用程序中的 api 结果创建了动态复选框，但问题是复选框结果没有在 onClick 上更新，设置了新状态。应该能够使用 setState 函数更新状态。

我尝试使用下面此链接中的解决方案，但它对我不起作用，因为我从 api 接收的有效负载不包含检查属性或真/假属性。

进行 API 调用以在反应中动态创建复选框

我收到的有效载荷如下： 

flavors: Array(3)
0: {id: "1001", name: "Spicy"}
1: {id: "1002", name: "Hot"}
2: {id: "1003", name: "Mediterranean"}

应该填充哪个：

getInitialState = () => {

  const initialState = {
      customer: {
                  id: '',
                  firstName: '',
                  lastName: '',
                  email: ''        
                },
     flavours: []    //Array to be populated, what is desired: {Spicy: false, 
                     // Hot: false, Mediterranean: false} 
                     // is populated currently as : Spicy, Hot, 
                     //   Mediterranean
      },
  return initialState;
 }

从 api 和复选框处理程序方法获取有效负载：

 getAllFlavours() {
   const { dispatch } = this.props;
   dispatch(userActions.getFlavours()).then((response) => {
   var flavourList = [];
   for (var i = 0; i < response.flavours.length; i++) {
      flavourList.push(response.flavours[i].name);
    }
    this.setState({
      flavours: flavourList,
     });
   });
 }

 handleCheckboxChange(event) {
    const target = event.target;
    const isChecked = target.checked;
    const name = target.name;
    this.setState({ flavours: { ...this.state.flavours, [name]: 
    isChecked } });
  }

创建复选框方法：

render() {

let flavourCheckboxes = this.state.flavours.map((item, i) => {
  return (<FormGroup key={i}>
     <Col>
      <Label key={i}>{item}</Label>
      </Col>
      <Col>
      <Input key={i} name={item} type="checkbox" checked={item} onClick= 
       {this.handleCheckboxChange} />
      </Col>
    </FormGroup>)
 });

 return (
 // other html tags
   <CardBody>
      <Row>
         {flavourCheckboxes}  // checkboxes created
      </Row>
   </CardBody>
   // other html tags

我希望该复选框能够选中和取消选中在 onclick 触发时更新状态，但目前我检查了所有值并且您无法取消选中它们

注意：还尝试使用 defaultCheck 而不是检查 onClick 后会产生地图未定义错误

标签： javascriptreact-redux

解决方案

在getAllFlavours中，我不知道您是否应该从 api 接收已检查/未检查的值，但是在设置状态时，getAllFlavours您可以将其设置为：

let flavourLists = { [name] : { isChecked : false } };

handleCheckboxChange然后像这样覆盖检查的值：

this.setState({ flavours: { ...this.state.flavours ,[name] : { isChecked : true } } })

现在在渲染中相应地访问状态值。

推荐阅读