React使用的问题解惑

React中props的值不能直接改变

TryHook组件

import React, { useState } from 'react';
import TryHookChild from './TryHookChild';

function TryHook() {
    // 声明一个叫 “count” 的 state 变量。   setCount不能直接放在渲染的流程中
    const [count, setCount] = useState(['a','b','c','d','e']);
    let strCombin = '';
    count.forEach((str) => {
        strCombin = strCombin + str
    });
   console.log(strCombin)
    return (
      <div>
        <p> {strCombin} </p>
        <TryHookChild setCount={setCount} count={count}/>
      </div>
    );
  }

  export default TryHook;

TryHookChild组件

在这里import React from 'react';

function TryHookChild(props){
    return (
        <button onClick={() => {
            // props.count.splice(0, 1);   不能通过splice，直接操作props的属性
            // console.log(props.count);
            props.setCount(() => {
                let newCount = props.count.concat();  //要像这样，先返回一个新数组，再对这个新数组splice，最后通过setCount赋值
                newCount.splice(0, 1)
                console.log(props.count);
                return newCount;
            });
        }}>
          Click me
        </button>
    )
}

export default TryHookChild;插入代码片

另外state的值也不能直接操作，只能间接的操作，把state赋给另外一个变量，然后再操作这个变量，再setState就可以了
还有关于Hook中，这种用法

const [count, setCount] = useState(['a','b','c','d','e']);

在退出函数后，即组件渲染结束后，函数里的count变量就会消失，但是count变量会另外被React保存，React保存的始终是，setState之前的最新count

另外setState有这样的问题，如果setState里是个函数，那么函数最好自调用一下

setState(((num) => { //箭头函数里的num是形参
  return state + num
})(num)) //自调用的括号传入的是实参

最好别传函数进入setState
----------------------------------------------------------------------
另外关于state和props属性的深层次也不能改动问题

let newUserList = props.userList.concat();
let obj= Object.assign({}, newUserList[props.index]);
obj.username = value;
newUserList[props.index] = obj;
console.log(value);
props.setUserList(newUserList);

concat函数只能浅层次复制源对象，假如是个数组，数组里有对象，使用concat函数只能复制表层，新数组里的一个个对象值，实际上并没有取到值。但是这时候仍然能操控到新数组里的对象的属性值，但是这个属性值仍然是props.userList源数组里对象的值，因此违反了不能直接对props属性直接操作的规则。
那我们只能通过let obj= Object.assign({}, newUserList[props.index]);这样的方法，来改动