React useState

image.png

从 log看,initData 已经获取到 <p>default 3</p>;
但是 useState 生成的 content 是首次传入的;
useState 生成的值和传入的初始值不一致??
求问有可能是什么原因造成的?

index.js:

import React, { useEffect, useState } from 'react'
import Detail from './index_2.jsx'

export default function DateSets() {
    useEffect(() => {
        detail(); // 请求详情
    }, []);

    const [initData, setInitData] = useState('<p>default 1</p>');

    const detail = () => {
        Promise.resolve(setInitData('<p>default 3</p>'))
    };


    return (
        <div>
            <Detail initData={initData}></Detail>
        </div>

    )
}

index_2.js

import React, { useState } from 'react';


export default function Detail(props) {
    const { initData } = props;

    console.log('initData', initData);
    const [content, setContent] = useState(initData);
    console.log('initData - content', content);



    return (
        <div>
            {content}
        </div>
    );
}
阅读 1.9k
2 个回答

知道原因了,首先你要知道
index_2.js这里
initData 这个数据只会在 <Detail initData={initData} />初始化得时候执行一次,所以你初始话加载得时候 第一次第二次打印没问题<p>detail 1 </p>,
第三次打印initData <p>detail 3 </p>没问题,是因为你通过props传入得initData, 所以这个回根据传入得值打印。
第四行打印错误是因为前面提到得 在inex_2.js 内
const [content, setContent] = useState(initData); 这个代码只在初始化得时候会执行,所以还是回打印第一次传入得值。

解决办法:
1.目前来看你index_2.js 得content 没有其它改变得需求,也就是不需要自己得状态,你可以直接用传入的initData
也就是这样写

import React, { useState, useEffect } from 'react';
export default function Detail(props) {
    const { initData } = props;

    console.log('initData', initData);
    const [content, setContent] = useState(initData);

    useEffect(() => {
    // 对传入的数据监听,当传入的数据发生改变时,setContent的值
      setContent(initData)
    }, [initData])
    console.log('initData - content', content);
    return (
        <div>
            {initData}
        </div>
    );
}

2.如过你想index_2.js有自己的状态可以这样写
import React, { useState } from 'react';
export default function Detail(props) {

const { initData } = props;
return (
    <div>
        {initData}
    </div>
);

}

什么原因造成的?

建议再复习下useState的使用规则吧。

如何解决?

看意思是想实现Hooks版的getDerivedStateFromProps,官网有解决方案:How do I implement getDerivedStateFromProps?
可以这样调整下组件Detail的实现:

import React, { useState, useRef } from 'react';

export default function Detail(props) {
    const { initData } = props;
    const preInitData = useRef(initData);
    const [content, setContent] = useState(initData);
    
    if(preInitData.current !== initData) {
        preInitData.current = initData;
        setContent(initData);
    }

    console.log('initData', initData);
    console.log('initData - content', content);

    return (
        <div>
            {content}
        </div>
    );
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题