React useState

Question

从 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>
    );
}

Answer 1

知道原因了，首先你要知道
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>
);

}

Answer 2

什么原因造成的？

建议再复习下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>
    );
}