从 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>
);
}
知道原因了,首先你要知道
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
也就是这样写
2.如过你想index_2.js有自己的状态可以这样写
import React, { useState } from 'react';
export default function Detail(props) {
}