Question

我有一个数据库作为json文件。在渲染过程中，我随机选择几个对象，我想在映射数据库时更新我的全局存储，但在render（）中调用dispatch会导致大量错误，我不知道如何继续进行。

以下是我没有错误的内容：

render() {
        const fakePayload = this.props.fakePayload;
        const rngPayloadId = Math.floor(Math.random() * 4);

        const payload = fakePayload.map(payload => {

            if (payload.payloadId === rngPayloadId) {

                return payload.drugsId.map(id => {
                     return <tr>
                        <td> {id}</td>
                        <td>{drugs[id].name}</td>
                        <td><input value={undefined} type="number" name="price" /></td>
                        <td><button >Send</button></td>
                        <td><button>X</button></td>
                    </tr>
                })
            }
        })

        return (
            <tbody>{payload}</tbody>
        )

我想要做的是：

 return payload.drugsId.map(id => {
   this.props.dispatch(setId(randomNumber, id)

如果重要，行动如下：

export const setId = (id, drugId) => ({  
    type: 'SET_ID',
    renderedDrugs: {
        id,
        drugId
    }
})

我需要学习/做什么？

Answer 1

也许是因为你在渲染中调度一个动作。您是否尝试过调度componentDidMount()上的操作？

基于评论：

constructor(props){
    super(props);

    this.state = {
        rngId: 0
    };
}

render(){
    this.setState({rngId: Math.floor(Math.random() * 4)});
    ...
}

componentDidMount(){
    this.props.dispatch(....);
}

Answer 2

生命周期事件是React的核心部分。为了使用Redux，您必须阅读并理解它具有一定的能力。您无法在render内使用操作，因为操作会更新您的商店，该商店会更新调用render的组件，该组件也会调用您的操作，更新您的组件，调用render ......我确定你知道这是怎么回事。

您正在寻找componentWillMount或componentDidMount。这些方法中的函数将被调用一次，并且在安装组件时永远不会再次调用自身。请参阅有关生命周期事件或其他资源的Facebook React文档，例如教程。

编辑以回答您的评论问题。用于控制渲染更改的常见范例将更新组件是使用布尔（true / false）三元语句来显示元素或隐藏它（简化，但它现在可用。）您正在寻找像这样的东西。

class SampleComponent {
constructor() {
  this.state = {
    show: false
  }
}
componentDidMount() {
  this.setState({show: true})
}
render() {
  return (
    <div>
      { this.state.show ? <div>mounted</div> : null }
    </div>
  )
}

几乎没有用例可以做这样的事情。在组件安装时componentDidMount发生得非常快，您可以立即将this.state.show更改为true。您使用状态隐藏的html元素将显示为好像它们从未以状态控制开始。

渲染期间更新商店

2 个答案: