我无法在两个组件之间传递对象(类组件到功能组件)

Question

我有一个关于从类组件传递对象到功能组件的问题。在类组件中，我从一些API获得一个对象，在这一点上，一切都很好，但当我试图在功能组件传递对象时显示为undefined当我初始化一个值(带有钩子)

的例子:

const objectRecivedFromApi = [{name:"Jhon", age:25}, {name:"George", age:29}, {name:"Samantha", age:30}]
class ParentComponent extends Component { 
state={
allData: []
}
componentDidMount() {
this.setState({
allData: [...objectRecivedFromApi]
});
}
render(){
const {allData} = this.state
return(
<ChildComponent allData={allData} />
)
}
}

ChildComponent

const ChildComponent = ({allData}) =>{
const [value, setValue] = useState(allData)
console.log(value) //It's showing undefined
console.log(allData) //It's showing objectRecivedFromApi, why?
return(
<ul>
{value.map(m=>{
.....
})}
</ul>
)
}

我也试过用道具，但结果还是一样

function ChildComponent (props){
const [value, setValue] = useState([...props.allData])
.....
}

我是react的新手，在这一点上我有点困惑，因为我不知道如何解决这个问题。

Answer 1

useState的参数将是组件第一次运行时设置的初始状态-当它挂载时。所以

const ChildComponent = ({allData}) =>{
const [value, setValue] = useState(allData)

将意味着第一次调用ChildComponent，将allData放入value状态变量中。在进一步渲染时，如果allData发生变化，那将不会影响value。

要修复它，等待渲染子元素，直到allData填充:

// parent
allData.length === 0 ? null : <ChildComponent allData={allData} />

但是在两个不同的组件中拥有相同的有状态数据有点奇怪。我建议只把它放在一个组件中，并通过props在组件之间传递这个状态。例如，要从子进程中更改父进程的allData，可以将状态和状态设置器作为prop向下传递:

<ChildComponent
allData={allData}
changeData={allData => this.setState({ allData })}
/>

Answer 2

这是因为usestate只加载一次这是他第一次没有得到道具然后他不再更新状态

要跟踪道具的变化，可以这样做

useEffect(() => {
setValue(allData);
}, [allData])

我建议你阅读react中函数和组件的生命周期

实际上，我认为使用条件操作符更好只渲染你手上的数据

allData.length>0  && <ChildComponent allData={allData} />