React 无状态功能组件 - Laravel答案

【问题标题】：React Stateless Functional Components - LaravelReact 无状态功能组件 - Laravel
【发布时间】：2020-01-25 10:04:24
【问题描述】：

我设置了一个项目，其中 laravel 作为后端 Api 提供者，React 作为前端管理器。当我简单地渲染一些组件时，React 无状态功能组件运行良好。

const [state, setState] = useState({data:someData})

我使用 useEffect 通过 Axios 从 API URL 获取一些数据。很好

但是当我用 setState 改变一个组件的状态时，它就不起作用了。没有反映任何变化。即使我点击了具有点击事件的按钮 100 次，它看起来也像一个静态页面。控制台很清楚。没有错误

我想知道为什么？以及如何解决。

注意：基于类的组件没有这个问题。它完美呈现状态的任何更新

一些代码

const Users = (props) => {

const [state, setState] = useState({

    dataPraticiens: {
        data: [],
        currentPage: 1,
        PerPage: 3
    },
    loaded: false

});


useEffect(() => {
    Axios.get('/api/users').then((r) => {

        setState({

            dataPraticiens: {
                data: [...r.data.docs],
                currentPage: 1,
                PerPage: 3
            } ,

            loaded: true
        });

    }).catch((er)=> {
        console.log(er);
    })

},[state.loaded]);

const changePage = (event) => {

    let nS = state;
    nS.dataPraticiens.currentPage = Number(event.target.id);
    nS.loaded = false;
    setState(nS); 
    // log the state and yeah, state changes but not reflected in the page
}


const indexOfLast = state.dataPraticiens.currentPage * state.dataPraticiens.PerPage;

const indexOfFirst = indexOfLast - state.dataPraticiens.PerPage;

const current = state.dataPraticiens.data.slice(indexOfFirst, indexOfLast);


const pageN = [];
for (let i = 1; i <= Math.ceil(state.dataPraticiens.data.length / state.dataPraticiens.PerPage); i++) {
    pageN.push(i);
}

const renderPageN = pageN.map(num => {
    return (
        <li
            key={num}
            id={num}
            onClick={changePage} // Not work here.
        >
            {num}
        </li>
    );
});
return (
        {current.map((value, index) => {
           return <React.Fragment key={index}>
                     <li>{value}</li>
                  </React.Fragment>
         })}
        <ul>
          {renderPageN} // pages number`
        </ul>

     )}

【问题讨论】：

添加您的代码以便更好地理解。
已添加代码。谢谢
这看起来不像一个真正的功能组件。你在哪里返回它应该呈现的内容？
感谢大家的关注????????????

标签： javascript reactjs laravel fsc

【解决方案1】：

在useEffect 中，您应该使用一个空数组[] 来表示您希望效果只执行一次。使用[state.loaded] 会在每次状态更新时重置状态，因为状态更新会导致state.loaded 发生变化，而这种变化会触发效果挂钩。

另一件事是你不应该直接在这里改变状态：

let nS = state;
nS.dataPraticiens.currentPage = Number(event.target.id);
nS.loaded = false;
setState(nS);

请注意，nS 只是对同一状态对象的引用，因此您在技术上直接修改状态可能会导致未定义的行为和奇怪的错误。您应该构建状态对象的新副本：

const newState = {
  dataPraticiens: {
    ...state.dataPraticiens,
    currentPage: Number(event.target.id)
  }, 
  loaded: false
};

setState(newState);

来自 React docs：

永远不要直接改变 this.state，因为之后调用 setState() 可能会替换你所做的改变。将this.state 视为不可变的。

【讨论】：