React.js状态值为数组,怎么使用setState比较合适

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React.js状态值为数组,怎么使用setState比较合适相关的知识,希望对你有一定的参考价值。

最好是:

setState( 'arrary': [...this.state.array, newItem]).

setState( 'array' : this.state.array.concat([neItem])).

1.React 是一个用于构建用户界面的 javascript 库。

2.React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。

3.React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。

4.React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它

参考技术A React.js状态值为数组,那么使用setState设置状态的方法是调用onchang方法来操作数组。
写法如下:
onChange(event)
var newArray = this.state.arr.slice();
newArray.push("new value");
this.setState(arr:newArray)


上面的方法中使用onChange来完成状态的动态改变。
其中newArray 是把状态值数组进行拆分,然后调用push方法放入新值,再调用setState方法对数组进行更新。
参考技术B React是基于组件和状态机的。

你表达得不是很明确,我猜一下。
状态值肯定是一个属性,举个例子比如控件颜色有三个,red, yellow, green,你想用数组记录这些状态, var color = ["red", "yellow", "green"],setState的时候就用xxx.setState(color[0]), xxx.setState(color[1])。

上面的方法可以用,但是语义不是很明确,我们可以用对象来记录状态,比如:
var color = "redColor": "red", "yellowColor": "yellow", "greenColor": "green",setState的时候就用xxx.setState(color.redColor), xxx.setState(color.yellowColor)。

React JS 在状态数组中映射数组

【中文标题】React JS 在状态数组中映射数组【英文标题】:React JS mapping an array inside a state array 【发布时间】:2021-07-17 10:37:02 【问题描述】:

所以基本上我有这个问题。我对 React JS 比较陌生。我已经创建了一个状态并且我已经成功地映射了它,除了一件事。下面是状态:

const [currProject, setCurrProject] = useState([
            id: 4,
            title: "Title",
            desc: "Description",
            arr: ["these", "are", "array", "elements"]]);

那么,就像我说的,我这样映射:

currProject.map(item =>(
     <div>
          <h1>item.title</h1>
          <p>item.desc</p>
          <div>
               <p>item.arr</p>
          </div>
     </div>
        ))

所以基本上p标签在哪里,我想将currProject状态的数组中的元素放在单独的p标签中。所以它看起来像这样:

<p>these</p>
<p>are</p>
<p>array</p>
<p>elements</p>

但显然我不想硬编码。因为该数组中可能有更多或更少的元素。基本上我要问的是如何映射一个已经在状态数组中的数组?

【问题讨论】:

【参考方案1】:

您可以像映射前一个数组一样映射它。

    currProject.map((item, i) =>(
         <div key=i>
              <h1>item.title</h1>
              <p>item.desc</p>
              <div>
                   item.arr.map((item, i) => (
                    <p key=i>item</p>
                   ))
              </div>
         </div>
        ))

【讨论】:

【参考方案2】:

你需要使用更多map来渲染item.arr。

  currProject.map((item) => (
    <div key=item.id>
      <h1>item.title</h1>
      <p>item.desc</p>
      <div>
        item.arr.map((item2, index) => (
          <p key=index>item2</p>
        ))
      </div>
    </div>
  ))

注意:你需要在map内的第一个标签中添加一个key

【讨论】:

以上是关于React.js状态值为数组,怎么使用setState比较合适的主要内容,如果未能解决你的问题,请参考以下文章

正确修改 React.js 中的状态数组

React JS:数组未传递给状态

ReactJs:在使用动态 Taglist 时使用道具设置初始状态

React JS 在状态数组中映射数组

JSON 数组拆分 React JS

如何在 React js 中创建状态数组