繁体   English   中英

使用 API 值作为道具来更改 React 中的 State

Using API Values as props to change State in React

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在使用 API Values primaryKey 来更改 Click 上表示的数据,但 function 似乎不起作用。 并且没有错误被抛出。 我找不到这里出了什么问题。

我在这里要做的是 - 默认情况下,该表会输出多只股票,每只股票都有多列,当单击按钮时,它应该使用该股票的键值来仅表示该单只股票及其列。 这是我的部分代码:

    handleClick = (props) => {
        return (
            <div>
                {this.state.data.filter(data => data.includes({props})).map(filteredData => (
                    <li>
                    {filteredData}
                    </li>
            ))};
            </div>
        );
    }
    renderArray = () => {
        return (
            <table className="table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Price/ Chng</th>
                        <th>Mkt Cap</th>
                        <th>Volume</th>
                        <th>Turnover</th>
                    </tr>
                </thead>
                <tbody>
                    {this.state.data.map(item => {
                        return (
                            <tr key={item.co_S}>
                                <button onCLick={this.setState = () => this.handleClick(item.co_S)}><td >{item.co_N}</td></button>
                                <td>{item.price}</td>
                                <td>{item.p_chng_pc}</td>
                                <td>{item.Mkt_cap}</td>
                                <td>{item.volume}</td>
                                <td>{item.volume * item.price}</td>
                            </tr>
                        );
                    })};
                    
                </tbody>
            </table>
        );
    }
    render() {
        return (
            <this.renderArray />
        )
    }
}

export default StocksHomePage2;
1 个回复

 class App extends React.Component { state = { data: [ { co_S: 1, co_N: 1, price: 100, volume: 20, }, { co_N: 2, co_S: 2, price: 30, volume: 7, }, ], }; handleClick = (props) => { this.setState({ data: this.state.data.filter((item) => item.co_S === props), }); }; renderArray = () => { return ( <table className="table"> <thead> <tr> <th>Name</th> <th>Price</th> <th>Price/ Chng</th> <th>Mkt Cap</th> <th>Volume</th> <th>Turnover</th> </tr> </thead> <tbody> {this.state.data.map((item) => { return ( <tr key={item.co_S}> <button onClick={() => this.handleClick(item.co_S)}> <td>{item.co_N}</td> </button> <td>{item.price}</td> <td>{item.p_chng_pc}</td> <td>{item.Mkt_cap}</td> <td>{item.volume}</td> <td>{item.volume * item.price}</td> </tr> ); })} </tbody> </table> ); }; render() { return this.renderArray(); } } ReactDOM.render(<App />, document.getElementById("root"));
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

1 使用反应状态值和道具

我有两个反应成分: 我需要使用它来构建&lt;myInterface&gt; 。 令S为&lt;myInterface&gt;的状态,需要被&lt;select&gt;修改并由&lt;mytable&gt; 。 但是,S需要通过如下调用来接收初始值: 在此之后, &lt;se ...

2 使用 for-each 和 props 更改 state 的值

这是我在上下文中的状态, 我将道具从页面发送到这里,我想将这些道具推送到我的数组中,如果我的导航中有这些道具,我也想让它们的值处于活动状态, 我的道具成功添加到数组中,但我不会改变它们的值,我该如何解决这个问题 ...

3 使用上下文 api 传递道具状态道具

我想在不使用 props 的情况下将我的状态值名称传递给另一个组件 Context3.js。 我使用上下文 api 来创建上下文,并通过提供程序传递了值。 现在在 Context3.js 我试图使用它但在输出屏幕上我无法看到我的输出。 import './App.css'; impo ...

4 状态组件更改时,React Component不更新

我试图将股票列表呈现为按钮列表,并且我正在使用mapStateToProps并连接以将我的react组件连接到redux存储。 这是进行渲染的组件 为了确保我的状态正在更新而不是突变,我使用redux-logger中间件检查状态是否正在更改。 这是控制台中显示的快照 由于我使 ...

5 如何在 React Hooks 中将道具更改为状态?

在 Simple react 类组件中,我们曾经将 props 更改为这样的状态: 但我不知道如何在 Hooks 的新功能中做到这一点,但我正在尝试这样做。 基本上,我只需要更改来自另一个父组件的描述道具即可转为状态。 请问,你能告诉我如何以新的方式来做 Hooks 方式吗? ...

6 在 React 表单中更新道具更改状态

我在 React 表单和正确管理状态方面遇到问题。 我有一个表单中的时间输入字段(在模态中)。 初始值在getInitialState设置为状态变量,并从父组件传入。 这本身工作正常。 当我想通过父组件更新默认的 start_time 值时,问题就出现了。 更新本身通过setState start ...

2015-09-05 14:39:45 12 287288   reactjs
7 React 没有在 state 上重新渲染,并且道具发生了变化

我正在尝试在 React.js 中创建一个非常简单的绘图。 实际上,我只是将我创建的 Vanilla JS 代码转换为 React 应用程序。 您可以在 FiddleJS 上查看原始代码。 一切似乎都正常,但是渲染点的组件不会在道具更改时重新渲染。 然而,它的道具正在改变(我在 react-dev- ...

8 根据道具更改状态类型 - React Typescript

我有一个表单组件“AddBooking”,它采用以下道具: 如果传入此“编辑”道具,我想使用设置的值呈现表单。 如果没有传入,它就变成了一个“创建”的空白表单。 这就是我尝试使用状态的方式。 emptyBooking 只是在 NewBooking 类型中加载空字符串来初始化状态。 “B ...

9 反应-当道具改变时改变状态

我有一个React组件AttributeSingleChoice ,我这样调用: 基于我收到的新props ,我想更改其状态,如下所示: 但是,如果我使用componentWillReceiveProps , state.props将记住旧的props ,而不是我想要的新prop ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM