堆栈内存溢出
  繁体   English   中英

如何设置映射输入的嵌套JSON数组对象的状态

[英]How to setState of nested JSON array object of mapped input

 原文  2019-06-09 12:10:38  8   4    javascript/ arrays/ json/ reactjs/ object

问题描述

我有一个包含多个类别的JSON文件，每个类别都有一个名称，该名称带有一组具有自己的名称和值的输入字段。

如何使用setState更新每个onChange的值字段？ 类别和字段使用map()呈现。

我能够使它在没有嵌套字段的情况下工作，但没有。 感谢任何帮助。

JSON文件 

[{
    "catName": "Category 1",
    "fields": [
      {
        "name": "field 1",
        "amount": "0"
      },
      {
        "name": "field 2",
        "amount": "0"
      }
    ]
  },
  {
    "catName": "Category 2",
    "fields": [
      {
        "name": "field 1",
        "amount": "0"
      },
      {
        "name": "field 2",
        "amount": "0"
      }
}]

Main.js 

import React, { Component } from "react";
import Category from "./Category";
import sampleData from "./sampleData";

class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: sampleData
    };
  }

  handleChange = e => {
    this.setState({ ???  });
  };

  render() {
    return (
      <div>
        {this.state.list.map(item => (
          <Category
            id={item.catName}
            name={item.catName}
            key={item.catName}
            list={item}
            handleChange={this.handleChange}
          />
        ))}
      </div>
    );
  }
}

export default Main;

Category.js 

import React from "react";
import Item from "./Item";

const Category = ({ name, list, handleChange }) => {
  return (
    <div className="section">
      <h3>{name}</h3>
      {list.fields.map(item => (
        <Item
          id={item.name}
          name={item.name}
          key={item.name}
          list={item}
          handleChange={handleChange}
        />
      ))}
    </div>
  );
};

export default Category;

Item.js 

import React from "react";

const Item = ({ list, handleChange }) => {
  return (
    <div className="item">
      <label className="label">{list.name}</label>
      <input
        name={list.name}
        id={list.name}
        className="input"
        type="text"
        onChange={handleChange}
        value={list.amount}
      />
    </div>
  );
};

export default Item;

4 个解决方案

解决方案1
 0  2019-06-09 12:58:11

您的JSON无效。 您还忘记了检查list已经包含任何数据。

尝试这个：

在您的handleChange方法中，请确保使用正确的JSON标记。 您忘记了结局]} ： 

 this.setState({ list: [{
      "catName": "Category 1",
      "fields": [
        {
          "name": "field 1",
          "amount": "0"
        },
        {
          "name": "field 2",
          "amount": "0"
        }
      ]
    },
    {
      "catName": "Category 2",
      "fields": [
        {
          "name": "field 1",
          "amount": "0"
        },
        {
          "name": "field 2",
          "amount": "0"
        }
    ]}
  ]})

在Main类的render方法内，检查列表是否为数组，并且列表的长度是否大于0。如果设置了非数组类型的值，这将防止任何渲染错误。 

   {Array.isArray(this.state.list) && this.state.list.length < 0 && this.state.list.map(item => (
      <Category
        id={item.catName}
        name={item.catName}
        key={item.catName}
        list={item}
        handleChange={this.handleChange}
      />
    ))}

另外，请确保在您的Main Class的构造函数中设置一个空数组： 

constructor(props) {
    super(props);
    this.state = {
      list: []
    };
 }

解决方案2
 0  2019-06-09 13:03:28

让我们从头开始

  1. 您需要通过将id更改为id={${name},${item.name}}来向Item.js提供其父类别的ID。 添加onClick事件以清除以前的数据也将很不错

  2. 需要提供的类别组件是项目组件的ID

  3. 然后在正确访问json之后的主组件中，可以使用createNewData方法来创建新对象

结果是：

Main.js 

import React, { Component } from "react";
import Category from "./Category";
import sampleData from "./sampleData";

class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: sampleData
    };
  }

  createNewData = (mainAccess, property, value) => {
    let newData = sampleData;
    newData.forEach(category => {
      if (category["catName"] === mainAccess) {
        debugger;
        category["fields"].forEach(item => {
          if (item["name"] === property) {
            console.log(item["amount"]);
            item["amount"] = value;
          }
        });
      }
    });
    return newData
  };

  handleChange = e => {
    const propertyAccess = e.target.id.split(",");
    const newData = this.createNewData(propertyAccess[0],propertyAccess[1],e.target.value)
    this.setState({list:newData})
  };

  render() {
    return (
      <div>
        {this.state.list.map(item => (
          <Category
            id={item.catName}
            name={item.catName}
            key={item.catName}
            list={item}
            handleChange={this.handleChange}
          />
        ))}
      </div>
    );
  }
}

export default Main;

Item.js 

import React from "react";


const Item = ({ list, handleChange ,id}) => {

    return (
    <div className="item">
      <label className="label">{list.name}</label>
      <input
        name={list.name}
        id={id}
        className="input"
        type="text"
        onChange={handleChange}
        onClick={e=>e.target.value=""}
        value={list.amount}

      />
    </div>
  );
};

export default Item;

Category.js 

import React from "react";
import Item from "./Item";

const Category = ({ name, list, handleChange }) => {
  return (
    <div className="section">
      <h3>{name}</h3>
      {list.fields.map(item => (
        <Item
          id={`${name},${item.name}`}
          name={item.name}
          key={item.name}
          list={item}
          handleChange={handleChange}
        />
      ))}
    </div>
  );
};

export default Category;

解决方案3
 0  2019-06-09 13:40:17

如下更新代码 

import React, { Component } from "react";
import Category from "./Category";
import sampleData from "./sampleData";

class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: sampleData
    };
  }

  handleChange = (e, fieldName, catName) => {
    //get list from state
    const { list } = this.state

    //this returns the related item's index, I assume that all cats have a unique name, otherwise you should use unique values such as IDs
    const targetCatIndex = list.findIndex(item => item.catName === catName) 

    //find related field index
    const targetFieldIndex = list[targetCatIndex].fields.findIndex(item => item.name === fieldName)

    //update the field and assign to state
    list[targetCatIndex].fields[targetFieldIndex].amount = e.target.value

    this.setState({ list: list  });
  };

  render() {
    return (
      <div>
        {this.state.list.map(item => (
          <Category
            id={item.catName}
            name={item.catName}
            key={item.catName}
            list={item}            
            handleChange={this.handleChange}
          />
        ))}
      </div>
    );
  }
}

export default Main;



import React from "react";
import Item from "./Item";

const Category = ({ name, list, handleChange }) => {
  return (
    <div className="section">
      <h3>{name}</h3>
      {list.fields.map(item => (
        <Item
          id={item.name}
          name={item.name}
          key={item.name}
          list={item}
          // pass field and cat referance with input event
          handleChange={(e, fieldName) => handleChange(e, fieldName, name) } 
        />
      ))}
    </div>
  );
};

export default Category;


import React from "react";

const Item = ({ list, handleChange }) => {
  return (
    <div className="item">
      <label className="label">{list.name}</label>
      <input
        name={list.name}
        id={list.name}
        className="input"
        type="text"
        //pass related field referance here
        onChange={(e) => handleChange(e, list.name)}
        value={list.amount}
      />
    </div>
  );
};

export default Item;

这是工作演示

解决方案4
 0 已采纳  2019-06-09 14:52:23

将类别和项目索引传递给handleChange函数。 使用这些索引来更新数组中的正确项目。 通过不做避免状态突变 

// state mutation
this.state.list[categoryIndex].fields[fieldIndex].amount = e.target.value

handleChange函数 

handleChange = (e, categoryIndex, itemIndex) => {

  const { list } = this.state;

  const fields = [...list[categoryIndex].fields.slice(0, itemIndex),
  Object.assign({}, list[categoryIndex].fields[itemIndex], { amount: e.target.value }),
  ...list[categoryIndex].fields.slice(itemIndex + 1)
  ]


  this.setState({
    list: [...list.slice(0, categoryIndex),
    Object.assign({}, list[categoryIndex], { fields }),
    ...list.slice(categoryIndex + 1)
    ]
  })
}

项目组件，添加类别和字段索引作为道具。 

import React from "react";

const Item = ({ list, handleChange, categoryIndex, itemIndex, value }) => {
  return (
    <div className="item">
      <label className="label">{list.name}</label>
      <input
        name={list.name}
        id={list.name}
        className="input"
        type="text"
        value={value}
        onChange={(e) => handleChange(e, categoryIndex, itemIndex)}
      />
    </div>
  );
};

export default Item;

类别组成 

import React from "react";
import Item from "./Item";

const Category = ({ name, list, handleChange, categoryIndex }) => {
  return (
    <div className="section">
      <h3>{name}</h3>
      {list.fields.map((item, index) => (
        <Item
          id={item.name}
          name={item.name}
          key={item.name}
          list={item}
          categoryIndex={categoryIndex}
          itemIndex={index}
          value={item.amount}
          handleChange={handleChange}
        />
      ))}
    </div>
  );
};

export default Category;

DEMO 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script> <div id="root"></div> <script type="text/babel"> const Item = ({ list, handleChange, categoryIndex, itemIndex, value }) => { return ( <div className="item"> <label className="label">{list.name}</label> <input name={list.name} id={list.name} className="input" type="text" value={value} onChange={(e) => handleChange(e, categoryIndex, itemIndex)} /> </div> ); }; const Category = ({ name, list, handleChange, categoryIndex }) => { return ( <div className="section"> <h3>{name}</h3> {list.fields.map((item, index) => ( <Item id={item.name} name={item.name} key={item.name} list={item} categoryIndex={categoryIndex} itemIndex={index} value={item.amount} handleChange={handleChange} /> ))} </div> ); }; class App extends React.Component { constructor() { super(); this.state = { name: 'React', show: false, list: [ { "catName": "Category 1", "fields": [ { "name": "field 1", "amount": "0" }, { "name": "field 2", "amount": "0" } ] }, { "catName": "Category 2", "fields": [ { "name": "field 1", "amount": "0" }, { "name": "field 2", "amount": "0" } ] } ] }; } handleChange = (e, categoryIndex, itemIndex) => { const { list } = this.state; const fields = [...list[categoryIndex].fields.slice(0, itemIndex), Object.assign({}, list[categoryIndex].fields[itemIndex], { amount: e.target.value }), ...list[categoryIndex].fields.slice(itemIndex + 1) ] this.setState({ list: [...list.slice(0, categoryIndex), Object.assign({}, list[categoryIndex], { fields }), ...list.slice(categoryIndex + 1) ] }) } show = () => { this.setState({ show: true }) } render() { return ( <div> {this.state.list.map((item, index) => ( <Category id={item.catName} name={item.catName} key={item.catName} categoryIndex={index} list={item} handleChange={this.handleChange} /> ))} <br /> <button onClick={this.show}>Show changes</button> {this.state.show && <pre> {JSON.stringify(this.state.list, null, 4)} </pre> } </div> ); } } ReactDOM.render( <App />, document.getElementById('root') ); </script>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何将 setState 与嵌套的 JSON 数组对象一起使用 如何在反应中为嵌套的对象数组设置状态？ 如何设置此嵌套对象的状态？ setState如何在嵌套数组中做出反应 如何有条件地渲染映射数组中的映射对象 按索引在 SectionList 数据的嵌套数组对象中设置状态 "使用 setState 在嵌套数组中添加对象" 我如何setObject.item [n]的状态嵌套在数组中，而该数组嵌套在对象数组中 如何更改嵌套在数组中 object 数组中的 object 的状态/setState？ 如何将 object 的嵌套数组转换为 Json object
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM