反应:函数返回为未定义

Question

摘要

我在功能组件中具有以下函数，该函数一直未定义返回。 函数中的所有数据，tableData和SublessedStats都是定义和准确的。

这可能只是我正在制作的一个小JavaScript，因此非常感谢您的帮助！

法典

这是下面的功能组件：

const TableComponent = ({ tableData }) => {
formatTableData = () => {
console.log("inside sumDataFormat", tableData);
return tableData.forEach(competitor => {
let subtractedStats = [];
console.log("competitor in", competitor);
for (const i in competitor.startingLifeTimeStats) {
if (competitor.startingLifeTimeStats[i]) {
competitor.stats
? (subtractedStats[i] =
competitor.stats[i] - competitor.startingLifeTimeStats[i])
: (subtractedStats[i] = 0);
}
}
console.log("subtractedStats", subtractedStats);
return subtractedStats;
});
};
useEffect(() => {
console.log("formatTableData", formatTableData());
});
}

编辑：

有人可以帮助我解决此代码中的问题(如何解决此问题？(并可以简要解释功能组件

Answer 1

forEach函数不会不返回任何内容，它只是遍历您的数组，为您提供undefined，map函数可能是您要查找的：

formatTableData = () => {
console.log("inside sumDataFormat", tableData);
return tableData.map(competitor => { // This returns another array where every element is converted by what's returned in the predicate

Answer 2

功能组件是最基本的 React 组件类型，由组件的(不变的(属性定义。

功能组件需要返回一些JSX代码(UI((也可以为空(。 以下是最基本的功能组件示例

const App = () => {
const greeting = 'Hello Function Component!';
return <Headline value={greeting} />;
};
const Headline = ({ value }) => {
return <h1>{value}</h1>;
};
export default App;

---

解决方案代码

这是上面示例作为功能组件的解决方案 这是下面的解决方案，使用钩子将数据保存到组件的状态，并使用生命周期方法来解析组件DidMount上的数据：

const TableComponent = (props: ) => {
const [state, setState] = useState(initialState)
// componentDidUpdate
useEffect(() => {
setState(getData(props.data));
}, []);
// getData() - Parser for data coming inside the functional Component
const getData = (tableData) => {
return tableData.map(competitor => {
return competitor.startingLifeTimeStats.map((item, index) => {
return item && competitor.stats ? competitor.stats[index]-item : 0;
})
})
};
// UI (JSX)
return (
<Text>{JSON.stringify(state)}</Text>
);
}
export default TableComponent;

Answer 3

尝试使用地图示例代码，如下所示。

render() {
return (<div>
{this.state.people.map((person, index) => (
<p>Hello, {person.name} from {person.country}!</p>
))}
</div>);
}